Concern

Low-level UI primitives and headless components (behavior and accessibility).

Technology

@base-ui/react (Base UI for React)

Documentation

• Website: https://base-ui.com/
• Repository: https://github.com/base-ui/base-ui
• Getting started: https://base-ui.com/react/overview/quick-start

Implementation

Base UI is not added as a standalone dependency; it is pulled in through shadcn when the project is created with a Base UI preset (e.g. base-nova). The shadcn components.json style is set to that preset, so every block added with shadcn add (including login-03 and sidebar-07 in the boilerplate) uses @base-ui/react components. Those components are headless and unstyled; Tailwind (see styling) and the shadcn theme define their look. New blocks added with shadcn add will continue to use Base UI as long as the preset stays base-nova (or another base-* style).

Installation

Base UI is used when you set up the project with shadcn create and a Base UI preset (e.g. -p base-nova); see ui-components. For an existing project, set "style" in components.json to a base-* value (e.g. base-nova, base-vega) so shadcn add installs @base-ui/react components. Standalone: pnpm add @base-ui/react and use with your styling solution (e.g. styling / Tailwind).

Integration

ui-components / shadcn

Base UI primitives underpin ui-components (shadcn/ui). Use with styling for appearance.

styling / Tailwind

Base UI is unstyled; use Tailwind, CSS Modules, or any styling solution. For popups (Dialog, Popover), add .root { isolation: isolate; } on the app root so portaled content stacks correctly. For iOS 26+ Safari backdrops, add body { position: relative; } in global styles (see Quick start).