# Changelog Notable changes to the shadcn-cssinjs registry. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## June 2026 [#june-2026] ### Full shadcn/ui parity [#full-shadcnui-parity] The registry now mirrors the complete shadcn/ui component set — **51 components**. New additions: * **Overlays & menus** — `alert-dialog`, `hover-card`, `menubar`, `navigation-menu`, `select`. * **Forms** — `checkbox`, `radio-group`, `switch`, `slider`, `toggle-group`, `label`, `textarea`, `input-otp`. * **Data & layout** — `avatar`, `breadcrumb`, `button-group`, `pagination`, `progress`, `scroll-area`, `table`, `spinner`. * **Heavy-dependency components** — `calendar` (react-day-picker), `carousel` (embla), `chart` (recharts), `resizable` (react-resizable-panels), `sonner`. * **Compositions** — `date-picker`, `combobox`, and `data-table` docs showing how to assemble the primitives. ### RTL support [#rtl-support] Every component now uses logical CSS properties and Base UI's `DirectionProvider`, so they flip correctly in right-to-left layouts. See the [RTL guide](/docs/rtl) and the RTL preview on each component page. ### Docs parity [#docs-parity] Component pages were rebuilt to mirror the shadcn/ui base docs: live preview with inline source, CLI/Manual installation tabs, usage, composition, RTL, and an API reference link. ## Earlier [#earlier] * Initial release: StyleX + Base UI port of the core shadcn/ui components, shared `stylex-tokens`, and the theme customizer. # Introduction Copy-paste UI components for React. Styled with StyleX on Base UI, works with the shadcn CLI. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). **shadcn-cssinjs** provides beautifully designed, accessible, and customizable UI components. Styled with [StyleX](https://stylexjs.com) on top of [Base UI](https://base-ui.com) primitives, and designed to work seamlessly with the [shadcn CLI](https://ui.shadcn.com). ## Philosophy [#philosophy] shadcn-cssinjs follows the shadcn model for CSS-in-JS: copy-paste components you can own, with zero lock-in and sensible defaults that work immediately. Most shadcn setups assume Tailwind. That works well — until your team wants colocated, type-safe styles that compile to atomic CSS at build time. shadcn-cssinjs takes a different approach. It keeps the familiar component API, styles with StyleX instead of utility classes, and builds on Base UI so you can drop down to the primitives whenever you need more control. The goal is simple: make StyleX-styled components feel like the rest of your stack — composable, themeable, accessible, and easy to customize. ## Why shadcn-cssinjs? [#why-shadcn-cssinjs] Most CSS-in-JS component setups are either too opinionated or too scattered. shadcn-cssinjs is built for teams that want to ship quickly without giving up control: * **Own Your Code:** Copy the components into your project and customize everything. * **Start Fast:** Run one command and get production-ready defaults with StyleX and Base UI. * **Scale Safely:** Stay close to StyleX and Base UI primitives, then drop to raw APIs when needed. ## Features [#features]
# Installation Set up StyleX and Base UI, then install components from the shadcn-cssinjs registry. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). These components are styled with StyleX and built on Base UI. Before installing any component, your project needs StyleX's build pipeline configured. Do this once, then add as many components as you like with the `shadcn` CLI. Already using shadcn/ui? You can drop these components alongside your existing ones — they reuse the same CSS variables (`--background`, `--primary`, …) for theming. ## Set up StyleX [#set-up-stylex] Install the dependencies ```bash pnpm add @stylexjs/stylex @base-ui/react pnpm add -D @stylexjs/babel-plugin @stylexjs/postcss-plugin @babel/preset-typescript ``` Configure Babel StyleX transforms your component source with a Babel plugin. Create a `.babelrc` at the root of your project: ```json title=".babelrc" { "presets": ["next/babel", "@babel/preset-typescript"], "plugins": [ [ "@stylexjs/babel-plugin", { "runtimeInjection": false, "styleResolution": "property-specificity", "unstable_moduleResolution": { "type": "commonJS", "rootDir": "." } } ] ] } ``` Adding a `.babelrc` opts Next.js out of Turbopack/SWC for compilation. Run `next dev` and `next build` without the `--turbopack` flag so the Babel pipeline (and therefore StyleX) runs. Configure PostCSS The PostCSS plugin extracts the compiled CSS. It must run **before** Tailwind, and its options must match `.babelrc` so the class-name hashes line up. ```js title="postcss.config.mjs" const config = { plugins: { "@stylexjs/postcss-plugin": { include: ["app/**/*.{js,jsx,ts,tsx}", "components/**/*.{js,jsx,ts,tsx}"], useCSSLayers: true, styleResolution: "property-specificity", runtimeInjection: false, unstable_moduleResolution: { type: "commonJS", rootDir: process.cwd() }, }, "@tailwindcss/postcss": {}, }, }; export default config; ``` Add the StyleX directive Add `@stylex;` to your global stylesheet. The PostCSS plugin replaces it with the compiled component CSS. ```css title="app/globals.css" @import "tailwindcss"; @stylex; ``` ## Add the design tokens [#add-the-design-tokens] Every component references a shared set of design tokens. Install them once: ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/stylex-tokens.json ``` This drops `components/ui/tokens.stylex.ts`, which maps your CSS variables to typed StyleX tokens. You can edit it to point at different variables or add your own. ## Install a component [#install-a-component] ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/button.json ``` The component is copied into `components/ui//`. Import and use it: ```tsx import { Button } from "@/components/ui/button/button"; export function Demo() { return ; } ``` Browse the [components](/docs/components) for the full list and per-component install commands. # MCP Server Install components from this registry with your AI coding agent via the shadcn MCP server. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). The [shadcn MCP server](https://ui.shadcn.com/docs/mcp) lets AI coding agents browse and install registry items for you. Point it at this registry and you can say *"add the button and dialog components"* and the agent runs the install. ## Configure the registry [#configure-the-registry] Add this registry to your project's `components.json` under `registries`: ```json title="components.json" { "registries": { "@shadcn-cssinjs": "https://shadcn-cssinjs.com/r/{name}.json" } } ``` ## Add the MCP server [#add-the-mcp-server] Claude Code Cursor Run the shadcn MCP init command, or add the server manually: ```bash npx shadcn@latest mcp init --client claude ``` Add the server to `.cursor/mcp.json`: ```json title=".cursor/mcp.json" { "mcpServers": { "shadcn": { "command": "npx", "args": ["-y", "shadcn@latest", "mcp"] } } } ``` ## Use it [#use-it] Once configured, prompt your agent naturally: ```txt Show me the components available in the @shadcn-cssinjs registry. Add the dialog and dropdown-menu components to my project. ``` The agent reads each item's JSON, installs npm dependencies, and writes the source into `components/ui/` — the same result as running the CLI yourself. The MCP server uses the registry config in `components.json`. Make sure the `@shadcn-cssinjs` entry above is present before starting your agent. # Registry How this registry is structured and how to consume it with the shadcn CLI. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). This project is a [shadcn registry](https://ui.shadcn.com/docs/registry) — a collection of components distributed as source code over HTTP. The `shadcn` CLI reads a JSON descriptor for each item and copies the files straight into your project. ## Installing an item [#installing-an-item] Point the CLI at any item's JSON URL: ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/button.json ``` The CLI resolves dependencies, installs npm packages, and writes the files to `components/ui//`. You own the code from that point on. ## Registry structure [#registry-structure] Each item is declared in `registry.json` and built into a static JSON file under `public/r/`. A typical entry looks like this: ```json title="registry.json" { "name": "button", "type": "registry:ui", "dependencies": ["@base-ui/react", "@stylexjs/stylex"], "files": [ { "path": "registry/bases/stylex/ui/button.tsx", "type": "registry:ui", "target": "components/ui/button.tsx" } ], "registryDependencies": ["stylex-tokens", "stylex-utils"] } ``` * **`dependencies`** — npm packages the CLI installs for you. * **`registryDependencies`** — other items in this registry that get pulled in automatically. Every component depends on `stylex-tokens`, which installs the shared `tokens.stylex.ts`. * **`files`** — each component ships its `.tsx` and `.stylex.ts` side by side. ## Shared tokens [#shared-tokens] The `stylex-tokens` item is a `registry:lib` that installs `components/ui/tokens.stylex.ts`. It is the single source of truth for theming and is a `registryDependency` of nearly every component, so you rarely install it by hand. See [Theming](/docs/theming) for details. ## Building the registry [#building-the-registry] If you fork this project, regenerate the `public/r/*.json` files after editing `registry.json`: ```bash pnpm registry:build ``` Want to publish your own registry? Follow the official [registry guide](https://ui.shadcn.com/docs/registry/getting-started) — the same `shadcn build` pipeline powers this site. # RTL Enable right-to-left layouts for shadcn-cssinjs components. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). Every component in shadcn-cssinjs ships with right-to-left (RTL) support. The styles are authored with **CSS logical properties** (`margin-inline-start`, `inset-inline-end`, `text-align: start`, …) instead of physical ones, so spacing, borders and alignment flip automatically when the text direction changes. For interactive components that render in a portal (menus, popovers, tooltips, dialogs), Base UI also needs to know the direction so keyboard navigation and positioning flip correctly. You provide it with the `dir` attribute and a `DirectionProvider`. ## Set the direction [#set-the-direction] Set `dir="rtl"` on an element — usually `` — and wrap your app in Base UI's `DirectionProvider`. The `dir` attribute drives the CSS logical properties; the provider makes portalled content (menus, popovers) inherit the same direction. ```tsx title="app/layout.tsx" import { DirectionProvider } from "@base-ui/react/direction-provider"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` The `direction` passed to `DirectionProvider` should match the `dir` attribute on the DOM. Keep them in sync if you let users toggle direction at runtime. ## Scoping to a subtree [#scoping-to-a-subtree] You don't have to flip the whole page. Set `dir` on any wrapper and add a `DirectionProvider` around the same subtree to flip just that region: ```tsx
``` ## How it works [#how-it-works] * **Styling** flips through CSS logical properties. `padding-inline-start`, `border-inline-start`, `inset-inline-end` and `text-align: start` resolve against the nearest `dir`, so no JavaScript is involved for layout. * **Behavior** flips through Base UI's `DirectionProvider`. Arrow-key navigation in menus, the side a submenu or popover opens toward, and slide animations all read the provided direction. Throughout the component docs, the **RTL** section shows each component rendered with `dir="rtl"` so you can verify the result. # Theming Theme the StyleX components with CSS variables, exactly like shadcn/ui. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). Every component in this registry is themed with **CSS variables** — the same `--background`, `--primary`, `--ring` … tokens that shadcn/ui uses. Nothing is hard-coded. If you already have a shadcn/ui theme, these components adopt it with zero changes. ## How it works [#how-it-works] StyleX rules never reference raw colors. Instead each component reads from a shared token file that maps your CSS variables into typed StyleX tokens: ```ts title="components/ui/tokens.stylex.ts" import * as stylex from "@stylexjs/stylex"; export const colors = stylex.defineVars({ background: "var(--background)", foreground: "var(--foreground)", primary: "var(--primary)", primaryForeground: "var(--primary-foreground)", border: "var(--border)", ring: "var(--ring)", // … }); ``` Because the tokens resolve to `var(--…)`, the actual values are whatever your stylesheet defines. Change the variable, and every component updates. ## Defining the variables [#defining-the-variables] Define your light and dark palettes in your global stylesheet. Dark mode is driven by a `.dark` class on the document (e.g. via `next-themes`), exactly like stock shadcn/ui. ```css title="app/globals.css" :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --radius: 0.625rem; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --border: oklch(1 0 0 / 10%); --ring: oklch(0.556 0 0); } ``` Copy the full variable set from the [shadcn/ui theming docs](https://ui.shadcn.com/docs/theming) — this registry uses the identical variable names, so any shadcn/ui theme, generator, or `tweakcn` export works as-is. ## Radius [#radius] Components read `--radius` for their corner rounding. Set it once and the whole set scales: ```css :root { --radius: 0.5rem; /* try 0rem for sharp, 1rem for round */ } ``` ## Adding your own tokens [#adding-your-own-tokens] `tokens.stylex.ts` is yours after install — add tokens for any extra variables you use, then reference them from a component's `.stylex.ts` file: ```ts import { colors } from "@/components/ui/tokens.stylex"; export const styles = stylex.create({ base: { backgroundColor: colors.primary, color: colors.primaryForeground }, }); ``` # Accordion A vertically stacked set of interactive headings that each reveal a section of content. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/accordion.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; ``` ```tsx showLineNumbers Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. ``` ## Composition [#composition] Use the following composition to build an `Accordion`: ```text Accordion ├── AccordionItem │ ├── AccordionTrigger │ └── AccordionContent └── AccordionItem ├── AccordionTrigger └── AccordionContent ``` ## Basic [#basic] A basic accordion that shows one item at a time. The first item is open by default. ## Multiple [#multiple] Use the `multiple` prop to allow multiple items to be open at the same time. ## Disabled [#disabled] Use the `disabled` prop on `AccordionItem` to disable individual items. ## Borders [#borders] Add `border` to the `Accordion` and `border-b last:border-b-0` to the `AccordionItem` to add borders to the items. ## Card [#card] Wrap the `Accordion` in a `Card` component. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] See the [Base UI](https://base-ui.com/react/components/accordion#api-reference) documentation for more information. # Alert Dialog A modal dialog that interrupts the user with important content and expects a response. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/alert-dialog.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; ``` ```tsx showLineNumbers }> Show Dialog Are you absolutely sure? This action cannot be undone. This will permanently delete your account from our servers. Cancel Continue ``` ## Composition [#composition] Use the following composition to build an `AlertDialog`: ```text AlertDialog ├── AlertDialogTrigger └── AlertDialogContent ├── AlertDialogHeader │ ├── AlertDialogMedia │ ├── AlertDialogTitle │ └── AlertDialogDescription └── AlertDialogFooter ├── AlertDialogCancel └── AlertDialogAction ``` ## Basic [#basic] A basic alert dialog with a title, description, and cancel and continue buttons. ## Small [#small] Use the `size="sm"` prop to make the alert dialog smaller. ## Media [#media] Use the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog. ## Small with Media [#small-with-media] Use the `size="sm"` prop to make the alert dialog smaller and the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog. ## Destructive [#destructive] Use the `AlertDialogAction` component to add a destructive action button to the alert dialog. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] ### size [#size] Use the `size` prop on the `AlertDialogContent` component to control the size of the alert dialog. It accepts the following values: | Prop | Type | Default | | ------ | ------------------- | ----------- | | `size` | `"default" \| "sm"` | `"default"` | For more information about the other components and their props, see the [Base UI documentation](https://base-ui.com/react/components/alert-dialog#api-reference). # Alert Displays a callout for user attention. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/alert.json ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { Alert, AlertAction, AlertDescription, AlertTitle, } from "@/components/ui/alert"; ``` ```tsx showLineNumbers Heads up! You can add components and dependencies to your app using the cli. ``` ## Composition [#composition] Use the following composition to build an `Alert`: ```text Alert ├── Icon ├── AlertTitle ├── AlertDescription └── AlertAction ``` ## Basic [#basic] A basic alert with an icon, title and description. ## Destructive [#destructive] Use `variant="destructive"` to create a destructive alert. ## Action [#action] Use `AlertAction` to add a button or other action element to the alert. ## Custom Colors [#custom-colors] You can customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] ### Alert [#alert] The `Alert` component displays a callout for user attention. | Prop | Type | Default | | --------- | ---------------------------- | ----------- | | `variant` | `"default" \| "destructive"` | `"default"` | ### AlertTitle [#alerttitle] The `AlertTitle` component displays the title of the alert. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### AlertDescription [#alertdescription] The `AlertDescription` component displays the description or content of the alert. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### AlertAction [#alertaction] The `AlertAction` component displays an action element (like a button) positioned absolutely in the top-right corner of the alert. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | # Aspect Ratio Displays content within a desired ratio. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/aspect-ratio.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { AspectRatio } from "@/components/ui/aspect-ratio"; ``` ```tsx showLineNumbers Image ``` ## Square [#square] A square aspect ratio component using the `ratio={1 / 1}` prop. This is useful for displaying images in a square format. ## Portrait [#portrait] A portrait aspect ratio component using the `ratio={9 / 16}` prop. This is useful for displaying images in a portrait format. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] ### AspectRatio [#aspectratio] The `AspectRatio` component displays content within a desired ratio. | Prop | Type | Default | Required | | ----------- | -------- | ------- | -------- | | `ratio` | `number` | - | Yes | | `className` | `string` | - | No | For more information, see the [Base UI documentation](https://base-ui.com/react/components/aspect-ratio#api-reference). # Avatar An image element with a fallback for representing the user. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/avatar.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; ``` ```tsx showLineNumbers CN ``` ## Composition [#composition] Use the following composition to build an `Avatar`: ```text Avatar ├── AvatarImage ├── AvatarFallback └── AvatarBadge ``` Use the following composition to build an `AvatarGroup`: ```text AvatarGroup ├── Avatar │ ├── AvatarImage │ ├── AvatarFallback │ └── AvatarBadge ├── Avatar │ ├── AvatarImage │ ├── AvatarFallback │ └── AvatarBadge └── AvatarGroupCount ``` ## Basic [#basic] A basic avatar component with an image and a fallback. ## Badge [#badge] Use the `AvatarBadge` component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar. Use the `className` prop to add custom styles to the badge such as custom colors, sizes, etc. ```tsx showLineNumbers CN ``` ## Badge with Icon [#badge-with-icon] You can also use an icon inside ``. ## Avatar Group [#avatar-group] Use the `AvatarGroup` component to add a group of avatars. ## Avatar Group Count [#avatar-group-count] Use `` to add a count to the group. ## Avatar Group with Icon [#avatar-group-with-icon] You can also use an icon inside ``. ## Sizes [#sizes] Use the `size` prop to change the size of the avatar. ## Dropdown [#dropdown] You can use the `Avatar` component as a trigger for a dropdown menu. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] ### Avatar [#avatar] The `Avatar` component is the root component that wraps the avatar image and fallback. | Prop | Type | Default | | ----------- | --------------------------- | ----------- | | `size` | `"default" \| "sm" \| "lg"` | `"default"` | | `className` | `string` | - | ### AvatarImage [#avatarimage] The `AvatarImage` component displays the avatar image. It accepts all Base UI Avatar Image props. | Prop | Type | Default | | ----------- | -------- | ------- | | `src` | `string` | - | | `alt` | `string` | - | | `className` | `string` | - | ### AvatarFallback [#avatarfallback] The `AvatarFallback` component displays a fallback when the image fails to load. It accepts all Base UI Avatar Fallback props. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### AvatarBadge [#avatarbadge] The `AvatarBadge` component displays a badge indicator on the avatar, typically positioned at the bottom right. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### AvatarGroup [#avatargroup] The `AvatarGroup` component displays a group of avatars with overlapping styling. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### AvatarGroupCount [#avatargroupcount] The `AvatarGroupCount` component displays a count indicator in an avatar group, typically showing the number of additional avatars. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | For more information about Base UI Avatar props, see the [Base UI documentation](https://base-ui.com/react/components/avatar#api-reference). # Badge Displays a badge or a component that looks like a badge. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/badge.json ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx import { Badge } from "@/components/ui/badge"; ``` ```tsx Badge ``` ## Variants [#variants] Use the `variant` prop to change the variant of the badge. ## With Icon [#with-icon] You can render an icon inside the badge. Use `data-icon="inline-start"` to render the icon on the left and `data-icon="inline-end"` to render the icon on the right. ## With Spinner [#with-spinner] You can render a spinner inside the badge. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` prop to the spinner. ## Link [#link] Use the `render` prop to render a link as a badge. ## Custom Colors [#custom-colors] You can customize the colors of a badge by adding custom classes such as `bg-green-50 dark:bg-green-800` to the `Badge` component. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] ### Badge [#badge] The `Badge` component displays a badge or a component that looks like a badge. | Prop | Type | Default | | ----------- | ----------------------------------------------------------------------------- | ----------- | | `variant` | `"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"` | `"default"` | | `className` | `string` | - | # Breadcrumb Displays the path to the current resource using a hierarchy of links. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/breadcrumb.json ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; ``` ```tsx showLineNumbers }>Home }> Components Breadcrumb ``` ## Composition [#composition] Use the following composition to build a `Breadcrumb`: ```text Breadcrumb └── BreadcrumbList ├── BreadcrumbItem │ └── BreadcrumbLink ├── BreadcrumbSeparator ├── BreadcrumbItem │ └── BreadcrumbLink ├── BreadcrumbSeparator └── BreadcrumbItem └── BreadcrumbPage ``` ## Basic [#basic] A basic breadcrumb with a home link and a components link. ## Custom separator [#custom-separator] Use a custom component as `children` for `` to create a custom separator. ## Dropdown [#dropdown] You can compose `` with a `` to create a dropdown in the breadcrumb. ## Collapsed [#collapsed] We provide a `` component to show a collapsed state when the breadcrumb is too long. ## Link component [#link-component] To use a custom link component from your routing library, you can use the `render` prop on ``. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] ### Breadcrumb [#breadcrumb] The `Breadcrumb` component is the root navigation element that wraps all breadcrumb components. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### BreadcrumbList [#breadcrumblist] The `BreadcrumbList` component displays the ordered list of breadcrumb items. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### BreadcrumbItem [#breadcrumbitem] The `BreadcrumbItem` component wraps individual breadcrumb items. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### BreadcrumbLink [#breadcrumblink] The `BreadcrumbLink` component displays a clickable link in the breadcrumb. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### BreadcrumbPage [#breadcrumbpage] The `BreadcrumbPage` component displays the current page in the breadcrumb (non-clickable). | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ### BreadcrumbSeparator [#breadcrumbseparator] The `BreadcrumbSeparator` component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon. | Prop | Type | Default | | ----------- | ----------------- | ------- | | `children` | `React.ReactNode` | - | | `className` | `string` | - | ### BreadcrumbEllipsis [#breadcrumbellipsis] The `BreadcrumbEllipsis` component displays an ellipsis indicator for collapsed breadcrumb items. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | # Button Group A container that groups related buttons together with consistent styling. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/button-group.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, } from "@/components/ui/button-group"; ``` ```tsx ``` ## Composition [#composition] Use the following composition to build a `ButtonGroup`: ```text ButtonGroup ├── Button or Input ├── ButtonGroupSeparator └── ButtonGroupText ``` ## Accessibility [#accessibility] * The `ButtonGroup` component has the `role` attribute set to `group`. * Use Tab to navigate between the buttons in the group. * Use `aria-label` or `aria-labelledby` to label the button group. ```tsx showLineNumbers ``` ## ButtonGroup vs ToggleGroup [#buttongroup-vs-togglegroup] * Use the `ButtonGroup` component when you want to group buttons that perform an action. * Use the `ToggleGroup` component when you want to group buttons that toggle a state. ## Orientation [#orientation] Set the `orientation` prop to change the button group layout. ## Size [#size] Control the size of buttons using the `size` prop on individual buttons. ## Nested [#nested] Nest `` components to create button groups with spacing. ## Separator [#separator] The `ButtonGroupSeparator` component visually divides buttons within a group. Buttons with variant `outline` do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy. ## Split [#split] Create a split button group by adding two buttons separated by a `ButtonGroupSeparator`. ## Input [#input] Wrap an `Input` component with buttons. ## Input Group [#input-group] Wrap an `InputGroup` component to create complex input layouts. ## Dropdown Menu [#dropdown-menu] Create a split button group with a `DropdownMenu` component. ## Select [#select] Pair with a `Select` component. ## Popover [#popover] Use with a `Popover` component. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] ### ButtonGroup [#buttongroup] The `ButtonGroup` component is a container that groups related buttons together with consistent styling. | Prop | Type | Default | | ------------- | ---------------------------- | -------------- | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | ```tsx ``` Nest multiple button groups to create complex layouts with spacing. See the [nested](#nested) example for more details. ```tsx ``` ### ButtonGroupSeparator [#buttongroupseparator] The `ButtonGroupSeparator` component visually divides buttons within a group. | Prop | Type | Default | | ------------- | ---------------------------- | ------------ | | `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | ```tsx ``` ### ButtonGroupText [#buttongrouptext] Use this component to display text within a button group. | Prop | Type | Default | | -------- | -------------------- | ------- | | `render` | `React.ReactElement` | | ```tsx Text ``` Use the `render` prop to render a custom component as the text, for example a label. ```tsx showLineNumbers import { ButtonGroupText } from "@/components/ui/button-group"; import { Label } from "@/components/ui/label"; export function ButtonGroupTextDemo() { return ( }>Text ); } ``` # Button Displays a button or a component that looks like a button. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/button.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx import { Button } from "@/components/ui/button"; ``` ```tsx ``` ## Size [#size] Use the `size` prop to change the size of the button. ## Default [#default] ## Outline [#outline] ## Secondary [#secondary] ## Ghost [#ghost] ## Destructive [#destructive] ## Link [#link] ## Icon [#icon] ## With Icon [#with-icon] Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the icon for the correct spacing. ## Rounded [#rounded] Use the `className` prop to make the button rounded. ## Spinner [#spinner] Render a `` component inside the button to show a loading state. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the spinner for the correct spacing. ## Button Group [#button-group] To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/base/button-group) documentation for more details. ## As Link [#as-link] You can use the `buttonVariants` helper to make a link look like a button. **Do not use ` ) } ``` See [Reusable Components](#reusable-components) section for a more advanced pagination component. ## Sorting [#sorting] Let's make the email column sortable. The `rowSortingFeature` and sorted row model are already registered in our features object, so all that's left is wiring up the sorting state. ### Update `` [#update-datatable] ```tsx showLineNumbers title="app/payments/data-table.tsx" {3,8,15,21-24} "use client" import * as React from "react" import { useTable, type ColumnDef, type RowData, type SortingState, } from "@tanstack/react-table" export function DataTable({ columns, data, }: DataTableProps) { const [sorting, setSorting] = React.useState([]) const table = useTable({ features, data, columns, onSortingChange: setSorting, state: { sorting, }, }) return (
{ ... }
) } ``` ### Make header cell sortable [#make-header-cell-sortable] We can now update the `email` header cell to add sorting controls. ```tsx showLineNumbers title="app/payments/columns.tsx" {4,8-18} "use client"; import { createColumnHelper } from "@tanstack/react-table"; import { ArrowUpDown } from "lucide-react"; export const columns = columnHelper.columns([ columnHelper.accessor("email", { header: ({ column }) => { return ( ); }, }), ]); ``` This will automatically sort the table (asc and desc) when the user toggles on the header cell. ## Filtering [#filtering] Let's add a search input to filter emails in our table. The `columnFilteringFeature` and filtered row model are already part of our features object, so we only need to wire up the filter state and render an input. ### Update `` [#update-datatable-1] ```tsx showLineNumbers title="app/payments/data-table.tsx" {7,13,20-22,29,32,38-46} "use client" import * as React from "react" import { useTable, type ColumnDef, type ColumnFiltersState, type RowData, type SortingState, } from "@tanstack/react-table" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export function DataTable({ columns, data, }: DataTableProps) { const [sorting, setSorting] = React.useState([]) const [columnFilters, setColumnFilters] = React.useState( [] ) const table = useTable({ features, data, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, state: { sorting, columnFilters, }, }) return (
table.getColumn("email")?.setFilterValue(event.target.value) } className="max-w-sm" />
{ ... }
) } ``` Filtering is now enabled for the `email` column. You can add filters to other columns as well. See the [filtering docs](https://tanstack.com/table/latest/docs/framework/react/guide/column-filtering) for more information on customizing filters. ## Visibility [#visibility] Adding column visibility is fairly simple using `@tanstack/react-table` visibility API. ### Update `` [#update-datatable-2] ```tsx showLineNumbers title="app/payments/data-table.tsx" {8,14-19,29-30,38,42,57-84} "use client" import * as React from "react" import { useTable, type ColumnDef, type ColumnFiltersState, type ColumnVisibilityState, type RowData, type SortingState, } from "@tanstack/react-table" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function DataTable({ columns, data, }: DataTableProps) { const [sorting, setSorting] = React.useState([]) const [columnFilters, setColumnFilters] = React.useState( [] ) const [columnVisibility, setColumnVisibility] = React.useState({}) const table = useTable({ features, data, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, state: { sorting, columnFilters, columnVisibility, }, }) return (
table.getColumn("email")?.setFilterValue(event.target.value) } className="max-w-sm" /> }> Columns {table .getAllColumns() .filter( (column) => column.getCanHide() ) .map((column) => { return ( column.toggleVisibility(!!value) } > {column.id} ) })}
{ ... }
) } ``` This adds a dropdown menu that you can use to toggle column visibility. ## Row Selection [#row-selection] Next, we're going to add row selection to our table. ### Update column definitions [#update-column-definitions] ```tsx showLineNumbers title="app/payments/columns.tsx" {6,9-30} "use client"; import { createColumnHelper } from "@tanstack/react-table"; import { Badge } from "@/components/ui/badge"; import { Checkbox } from "@/components/ui/checkbox"; export const columns = columnHelper.columns([ columnHelper.display({ id: "select", header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label="Select row" /> ), enableSorting: false, enableHiding: false, }), ]); ``` ### Update `` [#update-datatable-3] ```tsx showLineNumbers title="app/payments/data-table.tsx" {11,20,25} export function DataTable({ columns, data, }: DataTableProps) { const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] ); const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); const table = useTable({ features, data, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, onRowSelectionChange: setRowSelection, state: { sorting, columnFilters, columnVisibility, rowSelection, }, }); return (
); } ``` This adds a checkbox to each row and a checkbox in the header to select all rows. ### Show selected rows [#show-selected-rows] You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API. ```tsx
{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.
``` ## Reusable Components [#reusable-components] Here are some components you can use to build your data tables. This is from the [Tasks](/examples/tasks) demo, which shares its features object (and the matching `TasksTableFeatures` type) across every component via a `data-table-features.ts` module — the same pattern we set up in [Set up Table Features](#set-up-table-features). ### Column header [#column-header] Make any column header sortable and hideable. ```tsx showLineNumbers {4} export const columns = columnHelper.columns([ columnHelper.accessor("email", { header: ({ column }) => ( ), }), ]); ``` ### Pagination [#pagination-1] Add pagination controls to your table including page size and selection count. ```tsx ``` ### Column toggle [#column-toggle] A component to toggle column visibility. ```tsx ``` ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). # Date Picker A date picker component with range and presets. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] The Date Picker is built using a composition of the `` and the `` components. See installation instructions for the [Popover](/docs/components/base/popover#installation) and the [Calendar](/docs/components/base/calendar#installation) components. ## Usage [#usage] ```tsx showLineNumbers title="components/example-date-picker.tsx" "use client"; import * as React from "react"; import { format } from "date-fns"; import { Calendar as CalendarIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; export function DatePickerDemo() { const [date, setDate] = React.useState(); return ( } > {date ? format(date, "PPP") : Pick a date} ); } ``` See the [React DayPicker](https://react-day-picker.js.org) documentation for more information. ## Composition [#composition] A date picker is built from `Popover` and `Calendar` (there is no `DatePicker` root component): ```text Popover ├── PopoverTrigger └── PopoverContent └── Calendar ``` ## Basic [#basic] A basic date picker component. ## Range Picker [#range-picker] A date picker component for selecting a range of dates. ## Date of Birth [#date-of-birth] A date picker component for selecting a date of birth. This component includes a dropdown caption layout for date and month selection. ## Input [#input] A date picker component with an input field for selecting a date. ## Time Picker [#time-picker] A date picker component with a time input field for selecting a time. ## Natural Language Picker [#natural-language-picker] This component uses the `chrono-node` library to parse natural language dates. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). # Dialog A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/dialog.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; ``` ```tsx showLineNumbers Open Are you absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our servers. ``` ## Composition [#composition] Use the following composition to build a `Dialog`: ```text Dialog ├── DialogTrigger └── DialogContent ├── DialogHeader │ ├── DialogTitle │ └── DialogDescription └── DialogFooter ``` ## Custom Close Button [#custom-close-button] Replace the default close control with your own button. ## No Close Button [#no-close-button] Use `showCloseButton={false}` to hide the close button. ## Sticky Footer [#sticky-footer] Keep actions visible while the content scrolls. ## Scrollable Content [#scrollable-content] Long content can scroll while the header stays in view. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] See the [Base UI](https://base-ui.com/react/components/dialog#api-reference) documentation for more information. # Drawer A drawer component for React. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). The drawer component now uses [Base UI](https://base-ui.com/react/components/drawer) instead of Vaul. If you installed the previous version, see the [migration guide](#migrating-from-vaul). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/drawer.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. Add the following to your global styles. On iOS Safari, the drawer overlay is absolutely positioned and requires a positioned `body` to cover the viewport after the page is scrolled. See the [Base UI docs](https://base-ui.com/react/overview/quick-start#ios-26-safari) for details. ```css body { position: relative; } ``` ## Usage [#usage] ```tsx showLineNumbers import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer"; ``` ```tsx showLineNumbers }>Open Are you absolutely sure? This action cannot be undone.
{/* Content here */}
}>Cancel ``` ## Composition [#composition] Use the following composition to build a `Drawer`: ```text Drawer ├── DrawerTrigger └── DrawerContent ├── DrawerHeader │ ├── DrawerTitle │ └── DrawerDescription └── DrawerFooter ``` `DrawerContent` composes the portal, overlay, viewport, and popup from Base UI. For lower-level control, `DrawerPortal`, `DrawerOverlay`, and `DrawerSwipeHandle` are also exported. ## Custom Sizes [#custom-sizes] A vertical drawer sizes itself to its content and is capped at `calc(100dvh - 6rem)` by default. A side drawer spans `75%` of the viewport width, or `24rem` on larger screens. To customize the height of a vertical drawer, use the `h-*` and `max-h-*` utilities on `DrawerContent`. ```tsx ``` To customize the width of a side drawer, use the `w-*` and `max-w-*` utilities on `DrawerContent`. ```tsx ``` When the same component renders in multiple directions, scope an override to one axis using the `data-[swipe-axis=*]` variants. ```tsx ``` To make a region of the drawer scrollable, make the scroll container a flex item. Avoid `h-full`, which does not resolve inside a content-sized drawer. ```tsx ...
{/* Scrollable content */}
... ``` ## Styling [#styling] The drawer exposes CSS variables for style-level customization. Set the sizing variables on `DrawerContent`. Set the overlay variable on `[data-slot=drawer-overlay]` in your CSS. | Variable | Default | Description | | ------------------------------ | ---------------------- | ----------------------------------------------------------------------- | | `--drawer-inset` | `0px` | Floats the drawer from the viewport edges. | | `--drawer-bleed-background` | `var(--color-popover)` | Fills the gap behind the drawer on swipe overshoot. | | `--drawer-overlay-min-opacity` | `0` | Minimum overlay opacity. Defaults to `0.5` when snap points are active. | The drawer also sets data attributes you can target with variants such as `data-[swipe-direction=down]:` on `DrawerContent`, or `group-data-[swipe-axis=y]/drawer-popup:` on its descendants. | Attribute | Values | Set when | | ------------------------- | ----------------------------- | ------------------------------------- | | `data-swipe-direction` | `up`, `right`, `down`, `left` | Always. | | `data-swipe-axis` | `x`, `y` | Always. | | `data-snap-points` | Present | The drawer has snap points. | | `data-expanded` | Present | The drawer is at the full snap point. | | `data-swiping` | Present | A swipe is in progress. | | `data-nested-drawer-open` | Present | A nested drawer is open on top. | ## Position [#position] Use the `swipeDirection` prop to set the side of the drawer. Available options are `up`, `right`, `down`, and `left`. ## Swipe Handle [#swipe-handle] Use `showSwipeHandle` on `Drawer` to render a swipe handle. ## Nested [#nested] Open drawers from inside another drawer. Parent drawers stay mounted and stack behind the frontmost drawer. ## Non Modal [#non-modal] Set `modal={false}` to allow interaction with the rest of the page while the drawer is open. Combine with `disablePointerDismissal` to prevent the drawer from closing on outside presses. Use `modal="trap-focus"` to keep focus inside the drawer while leaving scroll and pointer interaction unrestricted. ## Snap Points [#snap-points] Use `snapPoints` to snap a drawer to preset heights. Numbers between `0` and `1` represent fractions of the viewport. Numbers greater than `1` are treated as pixel values. String values support `px` and `rem` units. Snap points apply to vertical drawers. Track the active snap point with the controlled `snapPoint` and `onSnapPointChange` props. At the full snap point, the drawer gets a `data-expanded` attribute you can style with the `data-expanded:` variant. ## Responsive [#responsive] You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile. ## Migrating from Vaul [#migrating-from-vaul] The base drawer now uses [Base UI](https://base-ui.com/react/components/drawer) instead of Vaul. If you installed the previous base drawer, update your usage to the Base UI API. Update the dependency. ```diff - npm install vaul + pnpm add @base-ui/react @stylexjs/stylex ``` Replace `direction` with `swipeDirection` . Use `down` instead of `bottom`, and `up` instead of `top`. `left` and `right` stay the same. ```diff - + ``` Replace `asChild` with `render` . For `DrawerTrigger`, pass the trigger element to the `render` prop. ```diff - - - + }> + Open + ``` For `DrawerClose`, pass the close element to the `render` prop. ```diff - - - + }> + Cancel + ``` Update snap point props. If you use snap points, rename the controlled snap point props and the sequential snap point prop. ```diff ``` Update animation and focus props. ```diff - setDone(open)}> + setDone(open)}> ``` ```diff - event.preventDefault()}> + ``` Review Vaul-only props. Vaul props like `handleOnly`, `repositionInputs`, and `shouldScaleBackground` do not have one-to-one replacements in the base drawer API. Use Base UI props such as `disablePointerDismissal`, `modal`, `snapPoints`, or controlled `open` state for the behavior you need. ```diff - + ``` ```diff - + ``` Update custom data attribute selectors. Replace Vaul's `data-vaul-drawer-direction` selectors with Base UI's `data-swipe-direction` selectors. ```diff - + ``` Base UI also exposes attributes like `data-swiping`, `data-starting-style`, and `data-ending-style` for swipe and transition states. Descendants inside `DrawerContent` can use `group-data-[swipe-axis=x]/drawer-popup` and `group-data-[swipe-axis=y]/drawer-popup` for axis-specific styling. ## API Reference [#api-reference] See the [Base UI documentation](https://base-ui.com/react/components/drawer) for the full API reference. # Dropdown Menu Displays a menu to the user — such as a set of actions or functions — triggered by a button. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/dropdown-menu.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; ``` ```tsx showLineNumbers }> Open My Account Profile Billing Team Subscription ``` ## Composition [#composition] Use the following composition to build a `DropdownMenu`: ```text DropdownMenu ├── DropdownMenuTrigger └── DropdownMenuContent ├── DropdownMenuGroup │ ├── DropdownMenuLabel │ ├── DropdownMenuItem │ └── DropdownMenuItem ├── DropdownMenuSeparator ├── DropdownMenuGroup │ ├── DropdownMenuLabel │ ├── DropdownMenuCheckboxItem │ └── DropdownMenuCheckboxItem ├── DropdownMenuSeparator ├── DropdownMenuGroup │ ├── DropdownMenuLabel │ └── DropdownMenuRadioGroup │ ├── DropdownMenuRadioItem │ └── DropdownMenuRadioItem └── DropdownMenuSub ├── DropdownMenuSubTrigger └── DropdownMenuSubContent └── DropdownMenuGroup ├── DropdownMenuLabel ├── DropdownMenuItem └── DropdownMenuItem ``` ## Basic [#basic] A basic dropdown menu with labels and separators. ## Submenu [#submenu] Use `DropdownMenuSub` to nest secondary actions. ## Shortcuts [#shortcuts] Add `DropdownMenuShortcut` to show keyboard hints. ## Icons [#icons] Combine icons with labels for quick scanning. ## Checkboxes [#checkboxes] Use `DropdownMenuCheckboxItem` for toggles. ## Checkboxes Icons [#checkboxes-icons] Add icons to checkbox items. ## Radio Group [#radio-group] Use `DropdownMenuRadioGroup` for exclusive choices. ## Radio Icons [#radio-icons] Show radio options with icons. ## Destructive [#destructive] Use `variant="destructive"` for irreversible actions. ## Avatar [#avatar] An account switcher dropdown triggered by an avatar. ## Complex [#complex] A richer example combining groups, icons, and submenus. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] See the [Base UI documentation](https://base-ui.com/react/components/menu) for the full API reference. # Empty Use the Empty component to display an empty state. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/empty.json ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/components/ui/empty"; ``` ```tsx No data No data found ``` ## Composition [#composition] Use the following composition to build an `Empty` state: ```text Empty ├── EmptyHeader │ ├── EmptyMedia │ ├── EmptyTitle │ └── EmptyDescription └── EmptyContent ``` ## Outline [#outline] Use the `border` utility class to create an outline empty state. ## Background [#background] Use the `bg-*` and `bg-gradient-*` utilities to add a background to the empty state. ## Avatar [#avatar] Use the `EmptyMedia` component to display an avatar in the empty state. ## Avatar Group [#avatar-group] Use the `EmptyMedia` component to display an avatar group in the empty state. ## InputGroup [#inputgroup] You can add an `InputGroup` component to the `EmptyContent` component. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] ### Empty [#empty] The main component of the empty state. Wraps the `EmptyHeader` and `EmptyContent` components. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx ``` ### EmptyHeader [#emptyheader] The `EmptyHeader` component wraps the empty media, title, and description. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx ``` ### EmptyMedia [#emptymedia] Use the `EmptyMedia` component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar. | Prop | Type | Default | | ----------- | --------------------- | --------- | | `variant` | `"default" \| "icon"` | `default` | | `className` | `string` | | ```tsx ``` ```tsx CN ``` ### EmptyTitle [#emptytitle] Use the `EmptyTitle` component to display the title of the empty state. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx No data ``` ### EmptyDescription [#emptydescription] Use the `EmptyDescription` component to display the description of the empty state. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx You do not have any notifications. ``` ### EmptyContent [#emptycontent] Use the `EmptyContent` component to display the content of the empty state such as a button, input or a link. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx ``` # Field Combine labels, controls, and help text to compose accessible form fields and grouped inputs. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/field.json ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from "@/components/ui/field"; ``` ```tsx showLineNumbers
Profile This appears on invoices and emails. Full name This appears on invoices and emails. Username Choose another username. Subscribe to the newsletter
``` ## Composition [#composition] ### Field [#field] A single control with label, helper text, and validation. ```text Field ├── FieldLabel ├── Input / Textarea / Switch / Select ├── FieldDescription └── FieldError ``` ### FieldGroup [#fieldgroup] Related fields in one group. Use `FieldSeparator` between sections when needed. ```text FieldGroup ├── Field │ ├── FieldLabel │ ├── Input / Textarea / Switch / Select │ ├── FieldDescription │ └── FieldError ├── FieldSeparator └── Field ├── FieldLabel └── Input / Textarea / Switch / Select ``` ### FieldSet [#fieldset] Semantic grouping with a legend and description, usually containing a `FieldGroup`. ```text FieldSet ├── FieldLegend ├── FieldDescription └── FieldGroup ├── Field │ ├── FieldLabel │ ├── Input / Textarea / Switch / Select │ ├── FieldDescription │ └── FieldError └── Field ├── FieldLabel └── Input / Textarea / Switch / Select ``` ## Anatomy [#anatomy] The `Field` family is designed for composing accessible forms. A typical field is structured as follows: ```tsx showLineNumbers Label {/* Input, Select, Switch, etc. */} Optional helper text. Validation message. ``` * `Field` is the core wrapper for a single field. * `FieldContent` is a flex column that groups label and description. Not required if you have no description. * Wrap related fields with `FieldGroup`, and use `FieldSet` with `FieldLegend` for semantic grouping. ## Form [#form] See the [Form](/docs/forms) documentation for building forms with the `Field` component and [React Hook Form](/docs/forms/react-hook-form), [Tanstack Form](/docs/forms/tanstack-form), or [Formisch](/docs/forms/formisch). ## Input [#input] ## Textarea [#textarea] ## Select [#select] ## Slider [#slider] ## Fieldset [#fieldset-1] ## Checkbox [#checkbox] ## Radio [#radio] ## Switch [#switch] ## Choice Card [#choice-card] Wrap `Field` components inside `FieldLabel` to create selectable field groups. This works with `RadioItem`, `Checkbox` and `Switch` components. ## Field Group [#field-group] Stack `Field` components with `FieldGroup`. Add `FieldSeparator` to divide them. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## Responsive Layout [#responsive-layout] * **Vertical fields:** Default orientation stacks label, control, and helper text—ideal for mobile-first layouts. * **Horizontal fields:** Set `orientation="horizontal"` on `Field` to align the label and control side-by-side. Pair with `FieldContent` to keep descriptions aligned. * **Responsive fields:** Set `orientation="responsive"` for automatic column layouts inside container-aware parents. Apply `@container/field-group` classes on `FieldGroup` to switch orientations at specific breakpoints. ## Validation and Errors [#validation-and-errors] * Add `data-invalid` to `Field` to switch the entire block into an error state. * Add `aria-invalid` on the input itself for assistive technologies. * Render `FieldError` immediately after the control or inside `FieldContent` to keep error messages aligned with the field. ```tsx showLineNumbers /data-invalid/ /aria-invalid/ Email Enter a valid email address. ``` ## Accessibility [#accessibility] * `FieldSet` and `FieldLegend` keep related controls grouped for keyboard and assistive tech users. * `Field` outputs `role="group"` so nested controls inherit labeling from `FieldLabel` and `FieldLegend` when combined. * Apply `FieldSeparator` sparingly to ensure screen readers encounter clear section boundaries. ## API Reference [#api-reference] ### FieldSet [#fieldset-2] Container that renders a semantic `fieldset` with spacing presets. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx
Delivery {/* Fields */}
``` ### FieldLegend [#fieldlegend] Legend element for a `FieldSet`. Switch to the `label` variant to align with label sizing. | Prop | Type | Default | | ----------- | --------------------- | ---------- | | `variant` | `"legend" \| "label"` | `"legend"` | | `className` | `string` | | ```tsx Notification Preferences ``` The `FieldLegend` has two variants: `legend` and `label`. The `label` variant applies label sizing and alignment. Handy if you have nested `FieldSet`. ### FieldGroup [#fieldgroup-1] Layout wrapper that stacks `Field` components and enables container queries for responsive orientations. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx {/* ... */} {/* ... */} ``` ### Field [#field-1] The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing. | Prop | Type | Default | | -------------- | -------------------------------------------- | ------------ | | `orientation` | `"vertical" \| "horizontal" \| "responsive"` | `"vertical"` | | `className` | `string` | | | `data-invalid` | `boolean` | | ```tsx Remember me ``` ### FieldContent [#fieldcontent] Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx Notifications Email, SMS, and push options. ``` ### FieldLabel [#fieldlabel] Label styled for both direct inputs and nested `Field` children. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx Email ``` ### FieldTitle [#fieldtitle] Renders a title with label styling inside `FieldContent`. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx Enable Touch ID Unlock your device faster. ``` ### FieldDescription [#fielddescription] Helper text slot that automatically balances long lines in horizontal layouts. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx We never share your email with anyone. ``` ### FieldSeparator [#fieldseparator] Visual divider to separate sections inside a `FieldGroup`. Accepts optional inline content. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx Or continue with ``` ### FieldError [#fielderror] Accessible error container that accepts children or an `errors` array (e.g., from `react-hook-form`). | Prop | Type | Default | | ----------- | ------------------------------------------ | ------- | | `errors` | `Array<{ message?: string } \| undefined>` | | | `className` | `string` | | ```tsx ``` When the `errors` array contains multiple messages, the component renders a list automatically. `FieldError` also accepts issues produced by any validator that implements [Standard Schema](https://standardschema.dev/), including Zod, Valibot, and ArkType. Pass the `issues` array from the schema result directly to render a unified error list across libraries. # Hover Card For sighted users to preview content available behind a link. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/hover-card.json ``` Install the following dependencies: ```bash pnpm add @base-ui/react @stylexjs/stylex ``` Make sure [StyleX is configured](/docs/installation) and the design tokens are installed. Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@/components/ui/hover-card"; ``` ```tsx showLineNumbers Hover The React Framework – created and maintained by @vercel. ``` ## Composition [#composition] Use the following composition to build a `HoverCard`: ```text HoverCard ├── HoverCardTrigger └── HoverCardContent ``` ## Trigger Delays [#trigger-delays] Use `delay` and `closeDelay` on the trigger to control when the card opens and closes. ```tsx showLineNumbers Hover Content ``` ## Positioning [#positioning] Use the `side` and `align` props on `HoverCardContent` to control placement. ```tsx showLineNumbers Hover Content ``` ## Basic [#basic] ## Sides [#sides] ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] See the [Base UI](https://base-ui.com/react/components/hover-card#api-reference) documentation for more information. # Components Here you can find all the components available in the library. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). # Input Group Add addons, buttons, and helper content to inputs. > For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md). ## Installation [#installation] Command Manual ```bash npx shadcn@latest add https://shadcn-cssinjs.com/r/input-group.json ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage [#usage] ```tsx showLineNumbers import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "@/components/ui/input-group"; ``` ```tsx showLineNumbers ``` ## Composition [#composition] Use the following composition to build an `InputGroup`: ```text InputGroup ├── InputGroupInput or InputGroupTextarea ├── InputGroupAddon ├── InputGroupButton └── InputGroupText ``` ## Align [#align] Use the `align` prop on `InputGroupAddon` to position the addon relative to the input. For proper focus management, `InputGroupAddon` should always be placed after `InputGroupInput` or `InputGroupTextarea` in the DOM. Use the `align` prop to visually position the addon. ### inline-start [#inline-start] Use `align="inline-start"` to position the addon at the start of the input. This is the default. ### inline-end [#inline-end] Use `align="inline-end"` to position the addon at the end of the input. ### block-start [#block-start] Use `align="block-start"` to position the addon above the input. ### block-end [#block-end] Use `align="block-end"` to position the addon below the input. ## Icon [#icon] ## Text [#text] ## Button [#button] ## Kbd [#kbd] ## Dropdown [#dropdown] ## Spinner [#spinner] ## Textarea [#textarea] ## Custom Input [#custom-input] Add the `data-slot="input-group-control"` attribute to your custom input for automatic focus state handling. Here's an example of a custom resizable textarea from a third-party library. ## RTL [#rtl] To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference [#api-reference] ### InputGroup [#inputgroup] The main component that wraps inputs and addons. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | ```tsx ``` ### InputGroupAddon [#inputgroupaddon] Displays icons, text, buttons, or other content alongside inputs. For proper focus navigation, the `InputGroupAddon` component should be placed after the input. Set the `align` prop to position the addon. | Prop | Type | Default | | ----------- | ---------------------------------------------------------------- | ---------------- | | `align` | `"inline-start" \| "inline-end" \| "block-start" \| "block-end"` | `"inline-start"` | | `className` | `string` | | ```tsx ``` **For ``, use the `inline-start` or `inline-end` alignment. For ``, use the `block-start` or `block-end` alignment.** The `InputGroupAddon` component can have multiple `InputGroupButton` components and icons. ```tsx Button Button ``` ### InputGroupButton [#inputgroupbutton] Displays buttons within input groups. | Prop | Type | Default | | ----------- | ----------------------------------------------------------------------------- | --------- | | `size` | `"xs" \| "icon-xs" \| "sm" \| "icon-sm"` | `"xs"` | | `variant` | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"ghost"` | | `className` | `string` | | ```tsx Button ``` ### InputGroupInput [#inputgroupinput] Replacement for `` when building input groups. This component has the input group styles pre-applied and uses the unified `data-slot="input-group-control"` for focus state handling. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | | All other props are passed through to the underlying `` component. ```tsx ``` ### InputGroupTextarea [#inputgrouptextarea] Replacement for `