shadcn/ui

https://ui.shadcn.com/docs
Admin
shadcn/ui is a collection of beautifully designed, accessible UI components and a code distribution...
Tokens:610,764
Snippets:4,098
Trust Score:8.8
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Initialize TanStack Start project with shadcn CLI

Source: https://ui.shadcn.com/docs/installation/tanstack

Run the init command with the `-t start` template flag to scaffold a new TanStack Start project. Prompts will guide configuration for base, preset, monorepo, and more.

```bash
pnpm dlx shadcn@latest init -t start
```

--------------------------------

### Install @shadcn/helpers

Source: https://ui.shadcn.com/docs/helpers/tanstack-ai

Install the helper package using npm.

```bash
npm install @shadcn/helpers
```

--------------------------------

### Display installation messages in registry-item.json using docs

Source: https://ui.shadcn.com/docs/registry/registry-item-json

Displays custom documentation or installation instructions when the registry item is installed through the CLI.

```json
{
  "docs": "To get an OPENAI_API_KEY, sign up for an account at https://platform.openai.com."
}
```

--------------------------------

### Directory layout for multi-file registry item

Source: https://ui.shadcn.com/docs/registry/github

Example folder structure for a registry item containing configuration, documentation, and test setup files.

```txt
registry.json
config
└── vitest.config.ts
docs
└── testing.md
test
└── setup.ts
```

--------------------------------

### Install embla-carousel-react for manual setup

Source: https://ui.shadcn.com/docs/components/aria/carousel

Install the required Embla Carousel React dependency for manual installation.

```bash
npm install embla-carousel-react
```

--------------------------------

### Install from a Git tag

Source: https://ui.shadcn.com/docs/registry/github

Installs a registry item pinned to a specific release tag.

```bash
npx shadcn@latest add acme/toolkit/project-conventions#v1.0.0
```

--------------------------------

### Install button dependency for manual setup

Source: https://ui.shadcn.com/docs/components/aria/attachment

Install required dependencies such as button before manually copying the attachment component source.

```bash
npx shadcn@latest add button
```

--------------------------------

### Install Components from a Community Registry

Source: https://ui.shadcn.com/docs/new

Install components from any external registry URL using registry and component identifiers.

```bash
pnpm dlx shadcn@latest add @[registry]/[name]
```

--------------------------------

### Install multi-file item with shadcn CLI

Source: https://ui.shadcn.com/docs/registry/github

Installs the vitest-setup registry item and its declared files into the project.

```bash
npx shadcn@latest add acme/toolkit/vitest-setup
```

--------------------------------

### Create TanStack Start project using preset

Source: https://ui.shadcn.com/docs/installation/tanstack

Initialize a new TanStack Start project using a preset configuration generated from shadcn/create.

```bash
pnpm dlx shadcn@latest init --preset [CODE] --template start
```

--------------------------------

### Install input-otp package manually

Source: https://ui.shadcn.com/docs/components/aria/input-otp

Install the core input-otp dependency using npm for manual component setup.

```bash
npm install input-otp

```

--------------------------------

### Install resources using shadcn add

Source: https://ui.shadcn.com/docs/registry/namespace

Install resources from a specific configured registry, multiple namespaced registries, direct URLs, or local registry files.

```bash
# Install from a specific registry
npx shadcn@latest add @v0/dashboard

# Install multiple resources
npx shadcn@latest add @acme/button @lib/utils @ai/prompt

# Install from URL directly
npx shadcn@latest add https://registry.example.com/button.json

# Install from local file
npx shadcn@latest add ./local-registry/button.json
```

--------------------------------

### Install @shadcn/react Dependency

Source: https://ui.shadcn.com/docs/components/base/questionnaire

Installs the required @shadcn/react package for manual setup.

```bash
npm install @shadcn/react
```

--------------------------------

### Create a new TanStack Start project with CLI

Source: https://ui.shadcn.com/docs/installation/tanstack

Initializes a new TanStack Start project configured with React, Tailwind CSS, and the `@/*` import alias. Skip selecting the shadcn add-on during initial project creation.

```bash
pnpm dlx @tanstack/cli@latest create
```

--------------------------------

### Create a new TanStack Start project with RTL

Source: https://ui.shadcn.com/docs/rtl/start

Initialize a new TanStack Start project with RTL support using the shadcn CLI create command with the --template start and --rtl flags.

```bash
pnpm dlx shadcn@latest create --template start --rtl
```

--------------------------------

### Install and configure the shadcn package

Source: https://ui.shadcn.com/docs/utils/shimmer

Required when setting up shimmer without npx shadcn@latest init. Install the package and import the shared stylesheet in your global CSS file.

```bash
npm install shadcn
```

```css
@import "tailwindcss";
@import "shadcn/tailwind.css";
```

--------------------------------

### Initialize project with --rtl flag

Source: https://ui.shadcn.com/docs/changelog/2026-01-rtl

Enables RTL support from the start when initializing a new project.

```bash
npx shadcn@latest init --rtl

```

--------------------------------

### Initialize project with --pointer option and generated global CSS

Source: https://ui.shadcn.com/docs/changelog/2026-04-pointer-cursor

Use the --pointer option with the init command during setup to automatically add pointer cursor rules for non-disabled buttons to globals.css. This option functions as a project setup option similar to --rtl.

```bash
npx shadcn@latest init --pointer
```

```css
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}
```

--------------------------------

### Install component from a private GitHub repository

Source: https://ui.shadcn.com/docs/registry/github

Install registry items from a private GitHub repository using the standard add command once authenticated.

```bash
npx shadcn@latest add acme/private-toolkit/project-conventions
```

--------------------------------

### Install radix-ui dependency

Source: https://ui.shadcn.com/docs/components/radix/aspect-ratio

Installs the radix-ui dependency required for manual installation.

```bash
npm install radix-ui
```

--------------------------------

### Install Kbd via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/kbd

Installs the Kbd component automatically using the shadcn CLI.

```bash
npx shadcn@latest add kbd

```

--------------------------------

### Install Base UI React dependency

Source: https://ui.shadcn.com/docs/components/aria/drawer

Install the @base-ui/react package required for manual drawer setup.

```bash
npm install @base-ui/react
```

--------------------------------

### Install vaul dependency for manual setup

Source: https://ui.shadcn.com/docs/components/radix/drawer

Install the underlying vaul package required when adding the drawer component manually.

```bash
npm install vaul
```

--------------------------------

### Configure registries and install resource

Source: https://ui.shadcn.com/docs/registry/namespace

Add registry URL mappings to components.json and run the add command to install a component from the configured namespace.

```json
{
  "registries": {
    "@v0": "https://v0.dev/chat/b/{name}",
    "@acme": "https://registry.acme.com/resources/{name}.json"
  }
}
```

```bash
npx shadcn@latest add @acme/button
```

--------------------------------

### Install a namespaced resource

Source: https://ui.shadcn.com/docs/registry/namespace

Install a single resource from a configured namespace using the shadcn CLI.

```bash
npx shadcn@latest add @v0/dashboard
```

--------------------------------

### Install dependencies for manual setup

Source: https://ui.shadcn.com/docs/components/aria/calendar

Install required peer packages react-aria-components and @internationalized/date when adding the calendar component manually.

```bash
npm install react-aria-components @internationalized/date
```

--------------------------------

### View an item from the registry

Source: https://ui.shadcn.com/docs/cli

Runs the view command to preview an item before installing it.

```bash
npx shadcn@latest view [item]
```

--------------------------------

### Initialize TanStack Start monorepo project

Source: https://ui.shadcn.com/docs/installation/tanstack

Use the `--monorepo` flag when running the init command to configure a TanStack Start monorepo project.

```bash
pnpm dlx shadcn@latest init -t start --monorepo
```

--------------------------------

### Install Menubar using CLI

Source: https://ui.shadcn.com/docs/components/base/menubar

Add the menubar component to your project using the shadcn CLI.

```bash
npx shadcn@latest add menubar
```

--------------------------------

### Add an item using namespace

Source: https://ui.shadcn.com/docs/registry/getting-started

Test installation of a component using its namespaced identifier.

```bash
npx shadcn@latest add @acme/button
```

--------------------------------

### Install registry item from a private repository

Source: https://ui.shadcn.com/docs/changelog/2026-08-private-github-registries

Installs an item from a private GitHub repository using the shadcn CLI.

```bash
npx shadcn@latest add acme/internal-toolkit/auth-kit
```

--------------------------------

### Install chart component using CLI

Source: https://ui.shadcn.com/docs/components/chart

Installs the chart component and required dependencies into your project.

```bash
pnpm dlx shadcn@latest add chart
```

--------------------------------

### Install registry item using shadcn CLI

Source: https://ui.shadcn.com/docs/registry/github

Installs the specified item directly from the GitHub repository using the owner/repo/item syntax.

```bash
npx shadcn@latest add acme/toolkit/project-conventions
```

--------------------------------

### Install remix-themes package

Source: https://ui.shadcn.com/docs/dark-mode/remix

Installs the remix-themes package dependency using pnpm.

```bash
pnpm add remix-themes
```

--------------------------------

### Install pagination via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/pagination

Installs the pagination component into your project using the shadcn CLI.

```bash
npx shadcn@latest add pagination
```

--------------------------------

### Install Tooltip Manually and Configure TooltipProvider

Source: https://ui.shadcn.com/docs/components/radix/tooltip

Install radix-ui dependencies manually and wrap the application root in app/layout.tsx with TooltipProvider.

```bash
npm install radix-ui

```

```tsx
import { TooltipProvider } from "@/components/ui/tooltip"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

```

--------------------------------

### Install Aspect Ratio via CLI

Source: https://ui.shadcn.com/docs/components/aria/aspect-ratio

Installs the Aspect Ratio component into the project using the shadcn CLI.

```bash
npx shadcn@latest add aspect-ratio
```

--------------------------------

### Install Card via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/card

Run this command to add the Card component to your project.

```bash
npx shadcn@latest add card
```

--------------------------------

### Initialize project configuration with init

Source: https://ui.shadcn.com/docs/changelog/2023-06-new-cli

Run the init command to set up project styling, aliases, and Tailwind paths. Prompts guide the creation of the components.json file.

```bash
npx shadcn@latest init
```

```txt
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes
```

--------------------------------

### Install Tooltip manually with Base UI dependency and configure TooltipProvider

Source: https://ui.shadcn.com/docs/components/base/tooltip

Install the @base-ui/react dependency and wrap the root layout in app/layout.tsx with TooltipProvider.

```bash
npm install @base-ui/react

```

```tsx
import { TooltipProvider } from "@/components/ui/tooltip"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

```

--------------------------------

### Install next-themes with pnpm

Source: https://ui.shadcn.com/docs/dark-mode/next

Install the next-themes package as a project dependency to handle theme switching in Next.js.

```bash
pnpm add next-themes
```

--------------------------------

### Install from a full commit SHA

Source: https://ui.shadcn.com/docs/registry/github

Installs a registry item pinned to a 40-character commit SHA. Full SHAs are resolved directly without requiring Git.

```bash
npx shadcn@latest add acme/toolkit/project-conventions#c0ffee254729296a45d6691db565cf707a3fef5d
```

--------------------------------

### Install Message via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/message

Run the add command to install the message component into your project.

```bash
npx shadcn@latest add message
```

--------------------------------

### Add All Available Components

Source: https://ui.shadcn.com/docs/new

Download and add all components from the registry to your project using the --all flag.

```bash
pnpm dlx shadcn@latest add --all
```

--------------------------------

### Install recharts dependency manually

Source: https://ui.shadcn.com/docs/components/base/chart

Install the recharts package using npm for manual chart setup.

```bash
npm install recharts
```

--------------------------------

### Install multiple namespaced resources

Source: https://ui.shadcn.com/docs/registry/namespace

Install multiple resources across different registry namespaces in a single CLI command.

```bash
npx shadcn@latest add @acme/header @lib/auth-utils @ai/chatbot-rules
```

--------------------------------

### Install cmdk dependency manually

Source: https://ui.shadcn.com/docs/components/base/command

Install the cmdk dependency required for manual setup of the command component.

```bash
npm install cmdk
```

--------------------------------

### Initialize project with components via npx shadcn init

Source: https://ui.shadcn.com/docs/changelog/2024-08-npx-shadcn-init

Runs the shadcn CLI to initialize a project and install specified blocks or components in one command.

```bash
npx shadcn init sidebar-01 login-01
```

--------------------------------

### Install components from namespaced registries

Source: https://ui.shadcn.com/docs/changelog/2025-08-cli-3-mcp

Installs components from configured namespaced registries using the @registry/name format.

```bash
npx shadcn add @acme/button @internal/auth-system
```

--------------------------------

### Install hover-card via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/hover-card

Installs the hover-card component directly using the shadcn CLI command.

```bash
npx shadcn@latest add hover-card
```

--------------------------------

### Install from a branch ref

Source: https://ui.shadcn.com/docs/registry/github

Installs a registry item using a branch name. The CLI resolves branch names to commit SHAs using Git before fetching files.

```bash
npx shadcn@latest add acme/toolkit/project-conventions#main
```

--------------------------------

### Install ButtonGroup with pnpm

Source: https://ui.shadcn.com/docs/components/button-group

Installs the button-group component into the project using the shadcn CLI tool.

```bash
pnpm dlx shadcn@latest add button-group
```

--------------------------------

### Install Label via shadcn CLI

Source: https://ui.shadcn.com/docs/components/base/label

Command to install the Label component via the shadcn CLI.

```bash
npx shadcn@latest add label
```

--------------------------------

### Initialize a monorepo project with shadcn CLI

Source: https://ui.shadcn.com/docs/monorepo

Run the init command with the --monorepo flag and select a project template. This creates a Turborepo workspace setup with web and ui workspaces.

```bash
npx shadcn@latest init --monorepo
```

```bash
? Select a template ›
❯   Next.js
    Vite
    TanStack Start
    React Router
    Astro
```

--------------------------------

### Install Item from Registry Index

Source: https://ui.shadcn.com/docs/changelog/2025-09-registry-index

Installs an item from the registry index using the CLI. The registry entry is automatically added to components.json without manual configuration.

```bash
npx shadcn add @ai-elements/prompt-input
```

--------------------------------

### Install required dependencies with pnpm

Source: https://ui.shadcn.com/docs/installation/manual

Installs the core dependencies needed for shadcn components, styling utilities, and icons.

```bash
pnpm add shadcn class-variance-authority cn lucide-react tw-animate-css
```

--------------------------------

### Install Drawer via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/drawer

Add the drawer component to your project using the shadcn CLI.

```bash
npx shadcn@latest add drawer
```

--------------------------------

### Define multi-file universal starter template (my-custom-starter-template.json)

Source: https://ui.shadcn.com/docs/registry/examples

Creates a universal registry item that installs multiple files with explicit targets and package dependencies.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "my-custom-starter-template",
  "type": "registry:item",
  "dependencies": ["better-auth"],
  "files": [
    {
      "path": "/path/to/file-01.json",
      "type": "registry:file",
      "target": "~/file-01.json",
      "content": "..."
    },
    {
      "path": "/path/to/file-02.vue",
      "type": "registry:file",
      "target": "~/pages/file-02.vue",
      "content": "..."
    }
  ]
}
```

--------------------------------

### Install via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/resizable

Add the resizable component to your project using the shadcn CLI tool.

```bash
npx shadcn@latest add resizable
```

--------------------------------

### Initialize shadcn/ui with a preset and Laravel template

Source: https://ui.shadcn.com/docs/installation/laravel

Runs initialization using a visual preset from shadcn/create. Run from the project root and select Yes when prompted to overwrite components.json.

```bash
pnpm dlx shadcn@latest init --preset [CODE] --template laravel
```

--------------------------------

### Install react-resizable-panels dependency manually

Source: https://ui.shadcn.com/docs/components/aria/resizable

Install the required underlying react-resizable-panels package when manually setting up the component.

```bash
npm install react-resizable-panels
```

--------------------------------

### Initialize project configuration with init

Source: https://ui.shadcn.com/docs/cli

Initializes configuration and dependencies for an existing project or creates a new project with the --name flag. It installs dependencies, adds the cn utility, and configures CSS variables.

```bash
npx shadcn@latest init
```

--------------------------------

### Install resources from namespaced registries using shadcn CLI

Source: https://ui.shadcn.com/docs/components-json

Use the shadcn CLI to install single or multiple resources from configured namespaced and private registries.

```bash
# Install from a configured registry
npx shadcn@latest add @v0/dashboard

# Install from private registry
npx shadcn@latest add @private/button

# Install multiple resources
npx shadcn@latest add @acme/header @internal/auth-utils
```

--------------------------------

### Initialize shadcn/ui via CLI

Source: https://ui.shadcn.com/docs/installation/gatsby

Run the shadcn init command to set up and configure shadcn/ui in your project.

```bash
pnpm dlx shadcn@latest init
```

--------------------------------

### Install Calendar via CLI

Source: https://ui.shadcn.com/docs/components/aria/calendar

Add the Calendar component to your project using the shadcn CLI.

```bash
npx shadcn@latest add calendar
```

--------------------------------

### Install shadcn as a runtime dependency

Source: https://ui.shadcn.com/docs/registry/getting-started

Installs shadcn to enable server-side loader APIs for dynamic registry routes.

```bash
npm install shadcn
```

--------------------------------

### Install via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/input-otp

Add the input-otp component directly into your project using the shadcn CLI tool.

```bash
npx shadcn@latest add input-otp

```

--------------------------------

### Install registry item from GitHub repository using shadcn CLI

Source: https://ui.shadcn.com/docs/registry/github

Installs items directly from any GitHub repository containing a root registry.json file without needing a dedicated registry server.

```bash
npx shadcn@latest add <username>/<repo>/<item>
```

--------------------------------

### get(count?)

Source: https://ui.shadcn.com/docs/helpers/ai-sdk

Returns cloned messages from the start of the conversation up to the specified count.

```APIDOC
### Method Signature
`get(count?: number): UIMessage[]`

### Description
Return cloned messages from the start of the conversation. Throws an error when `count` is negative or not an integer.

### Parameters
- **count** (`number`, optional) - Number of messages to retrieve from the start of the conversation.

### Returns
- `UIMessage[]` - Array of cloned message objects.
```

--------------------------------

### Install shadcn Skills for AI Assistants

Source: https://ui.shadcn.com/docs/new

Install the shadcn skill to grant an AI assistant access to documentation, search, and the full component registry.

```bash
pnpm dlx skills add shadcn/ui
```

--------------------------------

### Install Calendar dependencies manually

Source: https://ui.shadcn.com/docs/components/base/calendar

Installs react-day-picker and date-fns required for the manual installation of the Calendar component.

```bash
npm install react-day-picker date-fns
```

--------------------------------

### Install via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/combobox

Add the Combobox component to the project using the shadcn CLI tool.

```bash
npx shadcn@latest add combobox
```

--------------------------------

### Add Skeleton via CLI

Source: https://ui.shadcn.com/docs/components/aria/skeleton

Install the Skeleton component using the shadcn CLI.

```bash
npx shadcn@latest add skeleton
```

--------------------------------

### View CLI options for shadcn init

Source: https://ui.shadcn.com/docs/cli

Displays available command-line arguments and options for the shadcn init command, including template selection, presets, monorepo setup, and CSS variable configuration.

```bash
Usage: shadcn init [options] [components...]

initialize your project and install dependencies

Arguments:
  components                 names, url or local path to component

Options:
  -t, --template <template>  the template to use. (next, vite, start, react-router, laravel, astro)
  -b, --base <base>          the component library to use. (base, radix, aria)
  -p, --preset [name]        use a preset configuration
  -y, --yes                  skip confirmation prompt. (default: true)
  -d, --defaults             use default configuration: --template=next --preset=nova (default: false)
  -f, --force                force overwrite of existing configuration. (default: false)
  -c, --cwd <cwd>            the working directory. defaults to the current directory.
  -n, --name <name>          the name for the new project.
  -s, --silent               mute output. (default: false)
  --css-variables            use css variables for theming. (default: true)
  --no-css-variables         do not use css variables for theming.
  --monorepo                 scaffold a monorepo project.
  --no-monorepo              skip the monorepo prompt.
  --rtl                      enable RTL support.
  --no-rtl                   disable RTL support.
  --pointer                  enable pointer cursor for buttons.
  --no-pointer               disable pointer cursor for buttons.
  --reinstall                re-install existing UI components.
  --no-reinstall             do not re-install existing UI components.
  -h, --help                 display help for command
```

--------------------------------

### Install from public GitHub registry address

Source: https://ui.shadcn.com/docs/registry/namespace

Use a direct GitHub repository address when installing from a public repository without configuring components.json.

```bash
npx shadcn@latest add acme/ui/button
```

--------------------------------

### Initialize a project with a design system preset

Source: https://ui.shadcn.com/docs/changelog/2026-03-cli-v4

Scaffolds a new project using a preset code that bundles design system configuration including colors, theme, icon library, fonts, and radius.

```bash
npx shadcn@latest init --preset a1Dg5eFl
```

--------------------------------

### Install @tanstack/react-table dependency

Source: https://ui.shadcn.com/docs/components/aria/data-table

Installs TanStack Table v9 for headless table functionality.

```bash
npm install @tanstack/react-table
```

--------------------------------

### Install from a ref containing slashes

Source: https://ui.shadcn.com/docs/registry/github

Installs a registry item using a branch ref path that contains slashes. If no ref is specified, the CLI defaults to the repository's default branch.

```bash
npx shadcn@latest add acme/toolkit/project-conventions#feature/conventions
```

--------------------------------

### Install Item component via CLI

Source: https://ui.shadcn.com/docs/components/aria/item

Add the Item component to your project using the shadcn CLI.

```bash
npx shadcn@latest add item
```

--------------------------------

### Add CI setup dependency on formatting and testing defaults in registry.json

Source: https://ui.shadcn.com/docs/registry/github

Configures a CI setup registry item that depends on formatting and testing configurations defined in the same repository.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme-toolkit",
  "homepage": "https://github.com/acme/toolkit",
  "items": [
    {
      "name": "ci-setup",
      "type": "registry:item",
      "registryDependencies": [
        "acme/toolkit/prettier-config",
        "acme/toolkit/vitest-setup"
      ],
      "files": [
        {
          "path": ".github/workflows/ci.yml",
          "type": "registry:file",
          "target": "~/.github/workflows/ci.yml"
        }
      ]
    }
  ]
}
```

--------------------------------

### Add an item using direct URL

Source: https://ui.shadcn.com/docs/registry/getting-started

Test the installation flow by running the add command with an item's direct JSON URL from target project directory.

```bash
npx shadcn@latest add http://localhost:3000/r/button.json
```

--------------------------------

### RTL button example imports

Source: https://ui.shadcn.com/docs/components/button

Imports for the right-to-left layout button component example.

```tsx
"use client"

import { ArrowRightIcon, PlusIcon } from "lucide-react"
```

--------------------------------

### Install Toggle via shadcn CLI

Source: https://ui.shadcn.com/docs/components/base/toggle

Add the Toggle component using the shadcn CLI command.

```bash
npx shadcn@latest add toggle

```

--------------------------------

### Create a new Gatsby project

Source: https://ui.shadcn.com/docs/installation/gatsby

Start a new Gatsby project using the create-gatsby initializer.

```bash
npm init gatsby
```

--------------------------------

### Create a new Astro project with shadcn CLI

Source: https://ui.shadcn.com/docs/installation/astro

Scaffold a new Astro project by running the init command. Follow the prompts to configure base, preset, monorepo, and other options.

```bash
pnpm dlx shadcn@latest init -t astro
```

--------------------------------

### Link button variant example

Source: https://ui.shadcn.com/docs/components/button

Declaration for the link button variant example component.

```tsx
import { Button } from "@/components/ui/button"

export function ButtonLink() {
```

--------------------------------

### Install Context Menu via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/context-menu

Add the context-menu component to your project using the shadcn CLI.

```bash
npx shadcn@latest add context-menu
```

--------------------------------

### Destructive button variant example

Source: https://ui.shadcn.com/docs/components/button

Declaration for the destructive button variant example component.

```tsx
import { Button } from "@/components/ui/button"

export function ButtonDestructive() {
```

--------------------------------

### Install Progress via CLI

Source: https://ui.shadcn.com/docs/components/base/progress

Adds the progress component to a project using the shadcn CLI.

```bash
npx shadcn@latest add progress
```

--------------------------------

### Ghost button variant example

Source: https://ui.shadcn.com/docs/components/button

Declaration for the ghost button variant example component.

```tsx
import { Button } from "@/components/ui/button"

export function ButtonGhost() {
```

--------------------------------

### Install questionnaire component with shadcn CLI

Source: https://ui.shadcn.com/docs/changelog/2026-08-questionnaire

Run this command to add the questionnaire component to your project.

```bash
npx shadcn@latest add questionnaire
```

--------------------------------

### Secondary button variant example

Source: https://ui.shadcn.com/docs/components/button

Declaration for the secondary button variant example component.

```tsx
import { Button } from "@/components/ui/button"

export function ButtonSecondary() {
```

--------------------------------

### Default button variant example

Source: https://ui.shadcn.com/docs/components/button

Declaration for the default button variant example component.

```tsx
import { Button } from "@/components/ui/button"

export function ButtonDefault() {
```

--------------------------------

### Install item with slash in item name

Source: https://ui.shadcn.com/docs/registry/github

Installs an item whose registry name contains slashes. The first two path segments denote the owner and repository, while remaining segments form the registry item name.

```bash
npx shadcn@latest add acme/toolkit/rules/agent
```

--------------------------------

### Install Label via CLI

Source: https://ui.shadcn.com/docs/components/aria/label

CLI command to add the label component to your project.

```bash
npx shadcn@latest add label

```

--------------------------------

### Install tooltip via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/tooltip

Adds the tooltip component to your project using the shadcn CLI.

```bash
npx shadcn@latest add tooltip

```

--------------------------------

### Install Input component via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/input

Adds the input component to the project using the shadcn CLI.

```bash
npx shadcn@latest add input
```

--------------------------------

### Install Tooltip using CLI and wrap app with TooltipProvider

Source: https://ui.shadcn.com/docs/components/base/tooltip

Run the CLI command to add the tooltip component and configure TooltipProvider at the root of the application in app/layout.tsx.

```bash
npx shadcn@latest add tooltip

```

```tsx
import { TooltipProvider } from "@/components/ui/tooltip"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

```

--------------------------------

### Install Sheet via CLI

Source: https://ui.shadcn.com/docs/components/aria/sheet

Add the sheet component to your project using the shadcn CLI.

```bash
npx shadcn@latest add sheet
```

--------------------------------

### Install Spinner via CLI

Source: https://ui.shadcn.com/docs/components/aria/spinner

Adds the spinner component to your project using the shadcn CLI tool.

```bash
npx shadcn@latest add spinner

```

--------------------------------

### Install Tailwind CSS for Vite

Source: https://ui.shadcn.com/docs/installation/vite

Installs Tailwind CSS and the Vite Tailwind plugin packages.

```bash
pnpm add tailwindcss @tailwindcss/vite
```

--------------------------------

### Install Collapsible via CLI

Source: https://ui.shadcn.com/docs/components/aria/collapsible

Add the collapsible component to your project using the shadcn CLI.

```bash
npx shadcn@latest add collapsible
```

--------------------------------

### Install Dropdown Menu via CLI

Source: https://ui.shadcn.com/docs/components/aria/dropdown-menu

Run the shadcn CLI command to add the dropdown menu component to your project.

```bash
npx shadcn@latest add dropdown-menu
```

--------------------------------

### Install Tabs via CLI

Source: https://ui.shadcn.com/docs/components/aria/tabs

Add the tabs component to your project using the shadcn CLI.

```bash
npx shadcn@latest add tabs
```

--------------------------------

### Initialize project using create alias

Source: https://ui.shadcn.com/docs/cli

Runs the create command, which serves as an alias for the init command.

```bash
npx shadcn@latest create
```

--------------------------------

### Install Toast Manually

Source: https://ui.shadcn.com/docs/components/base/toast

Install the @base-ui/react dependency and add the Toaster component to your root layout.

```bash
npm install @base-ui/react
```

```tsx
import { Toaster } from "@/components/ui/toast"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}
```

--------------------------------

### Directory structure for modular registry.json files

Source: https://ui.shadcn.com/docs/changelog/2026-05-registry-include

Demonstrates how to split a large source registry across subdirectories containing their own registry.json manifests.

```txt
registry.json
components
└── ui
    ├── button.tsx
    ├── input.tsx
    └── registry.json
hooks
├── registry.json
├── use-media-query.ts
└── use-toggle.ts
```

--------------------------------

### Installing Sonner manually

Source: https://ui.shadcn.com/docs/components/aria/sonner

Install required dependencies and add the Toaster component inside app/layout.tsx.

```bash
npm install sonner next-themes
```

```tsx
import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <Toaster />
        <main>{children}</main>
      </body>
    </html>
  )
}
```

--------------------------------

### Install Textarea via CLI

Source: https://ui.shadcn.com/docs/components/aria/textarea

Run the shadcn CLI command to add the textarea component to your project.

```bash
npx shadcn@latest add textarea
```

--------------------------------

### Install react-aria-components manually

Source: https://ui.shadcn.com/docs/components/aria/alert-dialog

Installs the required react-aria-components dependency when setting up the alert-dialog component manually.

```bash
npm install react-aria-components
```

--------------------------------

### shadcn init

Source: https://ui.shadcn.com/docs/cli

Initialize configuration and dependencies for an existing project, or create a new project with `--name`. Installs dependencies, adds the `cn` utility, and configures CSS variables.

```APIDOC
## shadcn init

### Description
Use the `init` command to initialize configuration and dependencies for an existing project, or create a new project with `--name`. The `init` command installs dependencies, adds the `cn` util, and configures CSS variables for the project.

### Usage
```bash
shadcn init [options] [components...]
```

### Command Invocations
```bash
npx shadcn@latest init
npx shadcn@latest create
```

### Arguments
- **components** (string[]) - Optional - Names, url, or local path to component.

### Options
- **-t, --template <template>** (string) - The template to use (`next`, `vite`, `start`, `react-router`, `laravel`, `astro`).
- **-b, --base <base>** (string) - The component library to use (`base`, `radix`, `aria`).
- **-p, --preset [name]** (string) - Use a preset configuration.
- **-y, --yes** (boolean) - Skip confirmation prompt. (default: true)
- **-d, --defaults** (boolean) - Use default configuration: `--template=next --preset=nova`. (default: false)
- **-f, --force** (boolean) - Force overwrite of existing configuration. (default: false)
- **-c, --cwd <cwd>** (string) - The working directory. Defaults to the current directory.
- **-n, --name <name>** (string) - The name for the new project.
- **-s, --silent** (boolean) - Mute output. (default: false)
- **--css-variables** (boolean) - Use css variables for theming. (default: true)
- **--no-css-variables** (boolean) - Do not use css variables for theming.
- **--monorepo** (boolean) - Scaffold a monorepo project.
- **--no-monorepo** (boolean) - Skip the monorepo prompt.
- **--rtl** (boolean) - Enable RTL support.
- **--no-rtl** (boolean) - Disable RTL support.
- **--pointer** (boolean) - Enable pointer cursor for buttons.
- **--no-pointer** (boolean) - Disable pointer cursor for buttons.
- **--reinstall** (boolean) - Re-install existing UI components.
- **--no-reinstall** (boolean) - Do not re-install existing UI components.
- **-h, --help** (boolean) - Display help for command.
```

--------------------------------

### Install custom destination file with shadcn CLI

Source: https://ui.shadcn.com/docs/registry/github

Installs the editorconfig file to its specified target location.

```bash
npx shadcn@latest add acme/toolkit/editorconfig
```

--------------------------------

### Run shadcn info to get project information

Source: https://ui.shadcn.com/docs/cli

Retrieves configuration and environment information about your project.

```bash
npx shadcn@latest info
```

--------------------------------

### Initialize a new Vite project with shadcn CLI

Source: https://ui.shadcn.com/docs/installation/vite

Scaffolds a new Vite project using the shadcn CLI. Follow the interactive prompts to configure project options.

```bash
pnpm dlx shadcn@latest init -t vite
```

--------------------------------

### Install Badge via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/badge

Add the badge component to your project using the shadcn CLI.

```bash
npx shadcn@latest add badge
```

--------------------------------

### Create project with --rtl flag

Source: https://ui.shadcn.com/docs/changelog/2026-01-rtl

Creates a new project configured with RTL support out of the box.

```bash
npx shadcn@latest create --rtl

```

--------------------------------

### Install Toast via CLI

Source: https://ui.shadcn.com/docs/components/base/toast

Add the toast component using shadcn CLI and include the Toaster component in the root layout.

```bash
npx shadcn@latest add toast
```

```tsx
import { Toaster } from "@/components/ui/toast"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}
```

--------------------------------

### Install Command component via CLI

Source: https://ui.shadcn.com/docs/components/aria/command

Add the command component to your project using the shadcn CLI.

```bash
npx shadcn@latest add command
```

--------------------------------

### Add Switch component using preset workflow

Source: https://ui.shadcn.com/docs/installation/laravel

Installs the Switch component into resources/js/components/ui/switch.tsx using the shadcn CLI.

```bash
pnpm dlx shadcn@latest add switch
```

--------------------------------

### Install attachment using CLI

Source: https://ui.shadcn.com/docs/components/aria/attachment

Run the shadcn CLI command to add the attachment component directly to your project.

```bash
npx shadcn@latest add attachment
```

--------------------------------

### Initialize Next.js project with shadcn preset

Source: https://ui.shadcn.com/docs/installation/next

Run this command to create a Next.js project initialized with your preset chosen in shadcn/create. Specific flags like --base, --monorepo, or --rtl will vary based on selected options.

```bash
pnpm dlx shadcn@latest init --preset [CODE] --template next
```

--------------------------------

### Install Avatar via CLI

Source: https://ui.shadcn.com/docs/components/aria/avatar

Run the shadcn CLI command to add the avatar component to your project.

```bash
npx shadcn@latest add avatar

```

--------------------------------

### Install Navigation Menu via shadcn CLI

Source: https://ui.shadcn.com/docs/components/base/navigation-menu

Run the shadcn CLI add command to add the navigation-menu component to your project.

```bash
npx shadcn@latest add navigation-menu
```

--------------------------------

### Install marker component via CLI

Source: https://ui.shadcn.com/docs/components/aria/marker

Runs the shadcn CLI command to add the marker component to your project.

```bash
npx shadcn@latest add marker
```

--------------------------------

### Create an InputGroup with addons and input

Source: https://ui.shadcn.com/docs/components/aria/input-group

Demonstrates an InputGroup demo with an input and both leading and trailing addons.

```tsx
import { Search } from "lucide-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupDemo() {
  return (
    <InputGroup className="max-w-xs">
      <InputGroupInput placeholder="Search..." />
      <InputGroupAddon>
        <Search />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
    </InputGroup>
  )
}
```

--------------------------------

### Create a new TanStack Router project

Source: https://ui.shadcn.com/docs/installation/tanstack-router

Initialize a new TanStack Router project configured with file routing, Tailwind CSS, and shadcn add-ons.

```bash
pnpm create tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
```

--------------------------------

### Install Separator using shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/separator

Adds the separator component to your project using the shadcn CLI.

```bash
npx shadcn@latest add separator
```

--------------------------------

### Install Alert via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/alert

Adds the Alert component and its dependencies to your project using the shadcn CLI.

```bash
npx shadcn@latest add alert
```

--------------------------------

### Install Dialog via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/dialog

Add the Dialog component to your project using the shadcn CLI.

```bash
npx shadcn@latest add dialog
```

--------------------------------

### Add and Use the Button Component

Source: https://ui.shadcn.com/docs/new

Install the button component directly into the components/ui/ directory and import it into a page or component.

```bash
pnpm dlx shadcn@latest add button
```

```tsx
Copyimport { Button } from "@/components/ui/button"
 
export default function Home() {
  return <Button>Click me</Button>
}
```

--------------------------------

### Switch presets with init --preset

Source: https://ui.shadcn.com/docs/changelog/2026-03-cli-v4

Reconfigure an app and its components by switching to a new preset.

```bash
npx shadcn@latest init --preset ad3qkJ7
```

--------------------------------

### Fetch component documentation with shadcn CLI

Source: https://ui.shadcn.com/docs/changelog/2026-04-component-composition

Pulls component documentation—including composition structure, usage, and examples—into context from the command line.

```bash
npx shadcn@latest docs card
```

--------------------------------

### Install Bubble via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/bubble

Add the bubble component to your project using the shadcn CLI.

```bash
npx shadcn@latest add bubble
```

--------------------------------

### Install Accordion via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/accordion

Adds the Accordion component and its dependencies to your project via the CLI.

```bash
npx shadcn@latest add accordion
```

--------------------------------

### Initialize a Vite monorepo project with shadcn CLI

Source: https://ui.shadcn.com/docs/installation/vite

Scaffolds a new Vite monorepo project using the `--monorepo` flag.

```bash
pnpm dlx shadcn@latest init -t vite --monorepo
```

--------------------------------

### Install Button using shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/button

Adds the button component directly to your project using the shadcn CLI.

```bash
npx shadcn@latest add button

```

--------------------------------

### MessageScrollerStreaming Component Example

Source: https://ui.shadcn.com/docs/components/base/message-scroller

Example showing MessageScrollerProvider configured with autoScroll in a streaming chat UI using @ai-sdk/react.

```tsx
"use client"

import { useChat } from "@ai-sdk/react"
import {
  ArrowUpIcon,
  GlobeIcon,
  ImageIcon,
  MessageCircleDashedIcon,
  PaperclipIcon,
  PlusIcon,
  RotateCwIcon,
  TelescopeIcon,
} from "lucide-react"

import { createChat, getMessageText } from "@/lib/ai"
import { MessageAnimated } from "@/components/message-animated"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
} from "@/components/ui/input-group"
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const chat = createChat()
  .user(
    "I'm building a chat for our app and the scroll behavior is driving me nuts. Every time the AI streams a reply, the whole thread jumps around."
  )
  .sleep(1000)
  .assistant(
    "That's the classic streaming scroll problem. Wrap your message list in `MessageScroller` and turn on `autoScroll` — the viewport pins to the bottom as tokens arrive, so users always see the latest text land in place.\n\nThe important part: it only auto-scrolls while the reader is already at the bottom. The moment they scroll up to read something earlier, auto-scroll backs off and their position is preserved. You get smooth streaming without fighting the user's intent."
  )
  .user(
    "Okay, but when someone sends a new message the view still feels jarring — like the whole conversation reloads from the top."
  )
  .sleep(1000)
  .assistant(
    "MessageScrollerItem fixes that with turn anchoring. Set `scrollAnchor` on the turn that should settle near the top instead of blindly snapping to the document bottom.\n\nIt also leaves a small peek of the previous exchange visible above the anchor, so context isn't lost. The reply starts in view without that disorienting jump you get from a plain overflow container."
  )
  .user(
    "And if they've scrolled up to re-read an older answer? I don't want to yank them back down."
  )
  .sleep(1000)
  .assistant(
    "You won't. Auto-scroll only runs when the viewport is already pinned to the bottom, so scrolling up is a deliberate opt-out — their place in the thread stays put even as new tokens keep arriving below.\n\nWhen there is content they haven't seen yet, `MessageScrollerButton` appears at the bottom of the viewport. One tap jumps them back to the newest message and re-engages auto-scroll. Same pattern as Slack or iMessage: quiet when you're caught up, helpful when you're not."
  )
  .user("Last one — does this work with assistive tech?")
  .sleep(1000)
  .assistant(
    '`MessageScrollerContent` sets `role="log"` and `aria-relevant="additions"` by default, so screen readers announce new messages as they stream in.\n\nThe scroll button is a real `<button>` with an sr-only label, and it\'s removed from the tab order when you\'re already at the bottom — no ghost focus stops.'
  )
const initialMessages = chat.get(0)
const transport = chat.transport({ delayMs: 20 })

export function MessageScrollerStreaming() {
  const { messages, sendMessage, setMessages, status } = useChat({
    messages: initialMessages,
    transport,
  })
  const nextMessage = chat.next(messages)
  const isBusy = status === "submitted" || status === "streaming"

  return (
    <MessageScrollerProvider autoScroll>
      <div className="relative flex flex-col gap-4">
        <Card className="mx-auto h-140 w-full max-w-sm gap-0">
          <CardHeader className="gap-1 border-b">
            <CardTitle>Streaming Messages</CardTitle>
            <CardDescription>
              Auto-scroll follows the live edge of the conversation.
            </CardDescription>
```

--------------------------------

### Run shadcn docs to fetch component documentation

Source: https://ui.shadcn.com/docs/cli

Fetches documentation and API references for the specified component.

```bash
npx shadcn@latest docs [component]
```

--------------------------------

### Initialize project using preset with shadcn/create

Source: https://ui.shadcn.com/docs/installation/react-router

Scaffold a new React Router project using a preset generated from shadcn/create. The exact command includes selected options such as --base, --monorepo, or --rtl.

```bash
pnpm dlx shadcn@latest init --preset [CODE] --template react-router
```

--------------------------------

### Install alert-dialog via shadcn CLI

Source: https://ui.shadcn.com/docs/components/aria/alert-dialog

Adds the alert-dialog component to your project using the shadcn CLI command.

```bash
npx shadcn@latest add alert-dialog
```

--------------------------------

### Install Empty Component via CLI

Source: https://ui.shadcn.com/docs/components/aria/empty

Command to add the Empty component to your project using the shadcn CLI.

```bash
npx shadcn@latest add empty
```
Tokens:
Raw