### my-custom-starter-template.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Example of a universal registry item that installs multiple files, demonstrating how to define multiple file targets.

```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": "..."
    }
  ]
}
```

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

### Initialize shadcn/ui Project with CLI

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/changelog/2023-06-new-cli.mdx

Run this command to start the interactive setup process for a new shadcn/ui project, which configures the `components.json` file.

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

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

### Install Multiple Namespaced Resources

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/namespace.mdx

Use this command to install several resources from different namespaces simultaneously, streamlining the setup process.

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

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

### Example Registry File Structure

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/github.mdx

Illustrates the directory structure for a registry item that includes configuration, documentation, and setup files.

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

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

### Install Vitest Setup Registry Item

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/github.mdx

Command to install the "vitest-setup" registry item from the "acme/toolkit" repository.

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

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

### Example: Add alert-dialog component

Source: https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/README.md

Example of using the add command to install the 'alert-dialog' component.

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

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

### example-style.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

JSON configuration to install a block from the shadcn/ui registry and override its primitives with custom ones.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-login",
  "type": "registry:block",
  "registryDependencies": [
    "login-01",
    "https://example.com/r/button.json",
    "https://example.com/r/input.json",
    "https://example.com/r/label.json"
  ]
}
```

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

### example-item.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Example demonstrating the use of the 'devDependencies' field to install packages as development dependencies for a registry item.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-item",
  "type": "registry:item",
  "devDependencies": ["@types/mdx"],
  "files": [
    {
      "path": "lib/mdx.ts",
      "content": "...",
      "type": "registry:lib"
    }
  ]
}
```

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

### .eslintrc.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Example of a universal registry item for installing a custom ESLint configuration file.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "my-eslint-config",
  "type": "registry:item",
  "files": [
    {
      "path": "/path/to/your/registry/default/custom-eslint.json",
      "type": "registry:file",
      "target": "~/.eslintrc.json",
      "content": "..."
    }
  ]
}
```

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

### Installation

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/input.mdx

Install the Input component using the shadcn CLI.

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

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

### Install from a community registry

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/new.mdx

Install components from any registry URL using the CLI.

```bash
npx shadcn@latest add @[registry]/[name]
```

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

### Install Item from GitHub Registry

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/changelog/2026-06-github-registries.mdx

Use this command to install an item from any public GitHub repository configured as a shadcn registry. The generic form shows the required path structure, followed by a concrete example.

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

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

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

### Example Secure Registry Setup for Operators

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/namespace.mdx

This configuration illustrates a secure registry setup for operators, including HTTPS and authorization headers with versioning.

```json
{
  "@company": {
    "url": "https://registry.company.com/v1/{name}.json",
    "headers": {
      "Authorization": "Bearer ${COMPANY_TOKEN}",
      "X-Registry-Version": "1.0"
    }
  }
}
```

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

### alias-child.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Demonstrates using `files[].target` placeholders to install files under user-configured shadcn directories, resolving from `components.json`.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alias-child",
  "type": "registry:item",
  "files": [
    {
      "path": "registry/new-york/alias/target-alias-button.tsx",
      "type": "registry:ui",
      "target": "@ui/target-alias-button.tsx",
      "content": "..."
    },
    {
      "path": "registry/new-york/alias/target-alias-helper.ts",
      "type": "registry:lib",
      "target": "@lib/target-alias-helper.ts",
      "content": "..."
    },
    {
      "path": "registry/new-york/alias/prompt-input.tsx",
      "type": "registry:ui",
      "target": "@ui/ai/prompt-input.tsx",
      "content": "..."
    }
  ]
}
```

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

### Get Component Documentation URLs with shadcn CLI

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/cli.md

Outputs resolved URLs for documentation, examples, and API references for specified components. Accepts one or more component names.

```bash
npx shadcn@latest docs <components...> [options]
```

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

### example.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/changelog/2026-05-package-imports-target-aliases.mdx

Example of a registry item using target aliases in files[].target to install files under configured shadcn directories.

```json
{
  "files": [
    {
      "path": "registry/default/ai/prompt-input.tsx",
      "type": "registry:ui",
      "target": "@ui/ai/prompt-input.tsx"
    }
  ]
}
```

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

### Installation

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/skeleton.mdx

Install the Skeleton component using the shadcn/ui CLI.

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

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

### Installation

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/table.mdx

Install the Table component using the shadcn CLI.

```bash
npx shadcn@latest add table
```

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

### Install dependencies (Manual installation)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/sonner.mdx

Command to install required dependencies for manual Sonner setup.

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

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

### Installation

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/combobox.mdx

Install the Combobox component using the shadcn CLI.

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

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

### Installation - Command Line Interface

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/label.mdx

Install the Label component using the shadcn/ui CLI.

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

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

### Installation

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/navigation-menu.mdx

Install the Navigation Menu component using the shadcn/ui CLI.

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

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

### Installation via CLI

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/pagination.mdx

Install the Pagination component using the shadcn CLI.

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

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

### Install Font

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/rtl/start.mdx

Install the Noto Sans Arabic font using Fontsource.

```bash
npm install @fontsource-variable/noto-sans-arabic
```

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

### Add all available components

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/new.mdx

Add all available components to your project.

```bash
npx shadcn@latest add --all
```

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

### Connect the MCP Server

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/new.mdx

Initialize the shadcn MCP server for your AI assistant.

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

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

### example-style.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Custom style from scratch

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "new-style",
  "type": "registry:style",
  "dependencies": ["tailwind-merge", "clsx"],
  "registryDependencies": [
    "utils",
    "https://example.com/r/button.json",
    "https://example.com/r/input.json",
    "https://example.com/r/label.json",
    "https://example.com/r/select.json"
  ],
  "cssVars": {
    "theme": {
      "font-sans": "Inter, sans-serif"
    },
    "light": {
      "main": "#88aaee",
      "bg": "#dfe5f2",
      "border": "#000",
      "text": "#000",
      "ring": "#000"
    },
    "dark": {
      "main": "#88aaee",
      "bg": "#272933",
      "border": "#000",
      "text": "#e6e6e6",
      "ring": "#fff"
    }
  }
}
```

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

### Add Toaster component (Manual installation)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/sonner.mdx

Example of adding the Toaster component to your root layout after manual installation.

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

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

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

### Installation - Command Line Interface

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/switch.mdx

Install the Switch component using the shadcn CLI.

```bash
npx shadcn@latest add switch
```

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

### Run Documentation Website Locally

Source: https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md

Starts the development server for the v4 workspace to view documentation locally.

```bash
pnpm --filter=v4 dev
```

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

### Add Toaster component (CLI installation)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/sonner.mdx

Example of adding the Toaster component to your root layout after CLI installation.

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

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

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

### Add multiple components

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/new.mdx

Add multiple components at once using the CLI.

```bash
npx shadcn@latest add button card input label
```

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

### example-scoped-plugin.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Shows examples of adding scoped npm plugins and local file-based plugins.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scoped-plugins",
  "type": "registry:component",
  "css": {
    "@plugin \"@headlessui/tailwindcss\"": {},
    "@plugin \"tailwindcss/plugin\"": {},
    "@plugin \"./custom-plugin.js\"": {}
  }
}
```

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

### example-item.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Example of adding environment variables to a registry item using the `envVars` field.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-item",
  "type": "registry:item",
  "envVars": {
    "NEXT_PUBLIC_APP_URL": "http://localhost:4000",
    "DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/postgres",
    "OPENAI_API_KEY": ""
  }
}
```

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

### .cursor/rules/custom-python.mdc

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Example of a universal registry item that installs custom Cursor rules for Python, demonstrating an explicit target for files.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "python-rules",
  "type": "registry:item",
  "files": [
    {
      "path": "/path/to/your/registry/default/custom-python.mdc",
      "type": "registry:file",
      "target": "~/.cursor/rules/custom-python.mdc",
      "content": "..."
    }
  ]
}
```

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

### Using Component Preview

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/examples/README.md

How to use the example in documentation by referencing its name (filename without .tsx).

```tsx
<ComponentPreview name="button-loading" />
```

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

### View Specific Component Details Examples

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/cli.md

Examples demonstrating how to view details for a shadcn component using its name or a full path.

```bash
npx shadcn@latest view @shadcn/button
```

```bash
npx shadcn@latest view owner/repo/item
```

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

### example-theme.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Custom theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-theme",
  "type": "registry:theme",
  "cssVars": {
    "light": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)",
      "primary": "oklch(0.546 0.245 262.881)",
      "primary-foreground": "oklch(0.97 0.014 254.604)",
      "ring": "oklch(0.746 0.16 232.661)",
      "sidebar-primary": "oklch(0.546 0.245 262.881)",
      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
      "sidebar-ring": "oklch(0.746 0.16 232.661)"
    },
    "dark": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)",
      "primary": "oklch(0.707 0.165 254.624)",
      "primary-foreground": "oklch(0.97 0.014 254.604)",
      "ring": "oklch(0.707 0.165 254.624)",
      "sidebar-primary": "oklch(0.707 0.165 254.624)",
      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
      "sidebar-ring": "oklch(0.707 0.165 254.624)"
    }
  }
}
```

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

### Import and Use Card Component (shadcn/create)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/tanstack.mdx

Example of importing and using the Card component in a TanStack Start route file after using shadcn/create.

```tsx
import { createFileRoute } from "@tanstack/react-router"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export const Route = createFileRoute("/")({
  component: App,
})

function App() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your TanStack Start app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}
```

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

### Get List of Installed shadcn/ui Components

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/cli.md

Run this command to retrieve a list of currently installed shadcn/ui components in your project. This is useful for the smart merge workflow when updating components.

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

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

### Initialize shadcn/ui Monorepo Project

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/monorepo.mdx

Use this command to create a new monorepo project with shadcn/ui, setting up `web` and `ui` workspaces with Turborepo.

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

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

### example-multiple-plugins.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Illustrates adding multiple plugins, noting their automatic grouping and deduplication, along with their npm dependencies.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multiple-plugins",
  "type": "registry:item",
  "dependencies": [
    "@tailwindcss/typography",
    "@tailwindcss/forms",
    "tw-animate-css"
  ],
  "css": {
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"@tailwindcss/forms\"": {},
    "@plugin \"tw-animate-css\"": {}
  }
}
```

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

### Install Multiple Resources with Override

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/namespace.mdx

When installing multiple resources, the last resolved resource with conflicting files will override previous ones. In this example, `login-form.ts` from `@custom/login-form` will override the one from `@acme/auth`.

```bash
npx shadcn@latest add @acme/auth @custom/login-form
```

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

### Interactive `init` Command Configuration Prompts

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/changelog/2023-06-new-cli.mdx

These are the questions asked during the `init` command execution to configure project settings like style, base color, CSS file location, and import aliases.

```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
```

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

### alias-parent.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Shows how registry dependencies can also utilize target placeholders, with a parent item installing an app component and a hook, and a child item installing a UI component and a helper.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alias-parent",
  "type": "registry:item",
  "registryDependencies": ["https://example.com/r/alias-child.json"],
  "files": [
    {
      "path": "registry/new-york/alias/target-alias-panel.tsx",
      "type": "registry:component",
      "target": "@components/target-alias-panel.tsx",
      "content": "..."
    },
    {
      "path": "registry/new-york/alias/use-target-alias.ts",
      "type": "registry:hook",
      "target": "@hooks/use-target-alias.ts",
      "content": "..."
    }
  ]
}
```

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

### Add TooltipProvider to root (CLI)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/tooltip.mdx

Example of adding TooltipProvider to `app/layout.tsx` for CLI installation.

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

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

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

### shadcn init Command Options

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/cli.mdx

Displays the available arguments and options for customizing the `shadcn init` command, including templates, presets, and project setup configurations.

```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)
  -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
```

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

### Initial setup

Source: https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/test/fixtures/frameworks/remix-indie-stack/README.md

Command to run the initial setup script for the project.

```sh
npm run setup
```

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

### Use useDirection Hook

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/direction.mdx

Example of using the useDirection hook to get the current text direction.

```tsx
import { useDirection } from "@/components/ui/direction"

function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}
```

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

### example-media-import.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Illustrates importing CSS conditionally using media queries for print and mobile styles.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "responsive-import",
  "type": "registry:item",
  "css": {
    "@import \"print-styles.css\" print": {},
    "@import url(\"mobile.css\") screen and (max-width: 768px)": {}
  }
}
```

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

### Scaffold a new project with CLI

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/index.mdx

Command to initialize a new project using the shadcn CLI with a specified framework template.

```bash
npx shadcn@latest init -t [framework]
```

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

### Unknown Registry Error Example

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/changelog/2025-08-cli-3-mcp.mdx

An example of the CLI displaying a helpful error message when an unknown registry is encountered, guiding the user to define it in components.json.

```txt
Unknown registry "@acme". Make sure it is defined in components.json as follows:
{
  "registries": {
    "@acme": "[URL_TO_REGISTRY]"
  }
}
```

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

### example-import.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Demonstrates a basic CSS import using "@import \"tailwindcss\"" and a local CSS file.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-import",
  "type": "registry:component",
  "css": {
    "@import \"tailwindcss\"": {},
    "@import \"./styles/base.css\"": {}
  }
}
```

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

### components.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/components-json.mdx

Example configuration demonstrating multiple registry setups including public, private with authentication, and team-specific with versioning.

```json
{
  "registries": {
    "@shadcn": "https://ui.shadcn.com/r/{name}.json",
    "@company-ui": {
      "url": "https://registry.company.com/ui/{name}.json",
      "headers": {
        "Authorization": "Bearer ${COMPANY_TOKEN}"
      }
    },
    "@team": {
      "url": "https://team.company.com/{name}.json",
      "params": {
        "team": "frontend",
        "version": "${REGISTRY_VERSION}"
      }
    }
  }
}
```

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

### CLI TypeScript Opt-out Prompt

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/changelog/2023-07-javascript.mdx

Example of the CLI prompt when opting out of TypeScript during project setup.

```txt
Would you like to use TypeScript (recommended)? no
```

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

### Initialize New shadcn/ui Project

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/SKILL.md

Commands to create a new shadcn/ui project, specifying project name, preset, and template.

```bash
npx shadcn@latest init --name my-app --preset base-nova
npx shadcn@latest init --name my-app --preset a2r6bw --template vite
```

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

### Get component documentation

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/changelog/2026-03-cli-v4.mdx

Command to retrieve documentation, code, and examples for a UI component.

```bash
npx shadcn@latest docs combobox
```

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

### Add a single component

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/new.mdx

Use the CLI to add a single component to your project.

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

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

### Initialize Existing shadcn/ui Project

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/SKILL.md

Commands to initialize an existing project with shadcn/ui, applying a preset or using default settings.

```bash
npx shadcn@latest init --preset base-nova
npx shadcn@latest init --defaults  # shortcut: --template=next --preset=nova (base style implied)
```

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

### Generated Project Creation Command

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/tanstack.mdx

Example of the `shadcn@latest init` command generated by shadcn/create, including a preset and template.

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

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

### Dark Mode Setup with next-themes

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/customization.md

Example of setting up class-based dark mode toggle using `next-themes` in a Next.js application.

```tsx
import { ThemeProvider } from "next-themes"

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>
```

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

### example-style.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Custom colors

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-style",
  "type": "registry:style",
  "cssVars": {
    "light": {
      "brand": "oklch(0.99 0.00 0)"
    },
    "dark": {
      "brand": "oklch(0.14 0.00 286)"
    }
  }
}
```

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

### Install Component from GitHub Registry

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/namespace.mdx

Use this command to install a component directly from a public GitHub repository without requiring a `components.json` configuration.

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

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

### example-url-import.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Shows how to import CSS using the url() syntax for external fonts and local stylesheets.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-import",
  "type": "registry:item",
  "css": {
    "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\")": {},
    "@import url('./local-styles.css')": {}
  }
}
```

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

### Get Project Context with shadcn info

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/SKILL.md

Use this command to refresh or retrieve the current project context, including configuration and installed components.

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

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

### Popover Usage Example

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/changelog/2026-01-inline-side-styles.mdx

Demonstrates how to use the `side="inline-start"` prop with `PopoverContent`.

```tsx
<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent side="inline-start">
    {/* Opens on the left in LTR, right in RTL */}
  </PopoverContent>
</Popover>
```

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

### Add a block

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/new.mdx

Add a specific block to your project using the CLI.

```bash
npx shadcn@latest add login-03
```

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

### Import and Use Button Component

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/tanstack.mdx

Example of importing and using the Button component within a TanStack React Router file after it has been added to the project.

```tsx
import { createFileRoute } from "@tanstack/react-router"

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

export const Route = createFileRoute("/")({
  component: App,
})

function App() {
  return (
    <div className="flex min-h-svh items-center justify-center p-6">
      <Button>Click me</Button>
    </div>
  )
}
```

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

### Installation via CLI

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/progress.mdx

Add the progress component using the shadcn CLI.

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

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

### Installation

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/select.mdx

Command to add the select component using shadcn CLI.

```bash
npx shadcn@latest add select
```

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

### Create Project with shadcn CLI (Alias)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/cli.mdx

This command is an alias for `shadcn init` and performs the same project initialization and setup.

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

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

### Define Vitest Setup Registry Item in JSON

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/github.mdx

Defines a registry item named "vitest-setup" in registry.json, specifying multiple files with their paths and target destinations for installation.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme-toolkit",
  "homepage": "https://github.com/acme/toolkit",
  "items": [
    {
      "name": "vitest-setup",
      "type": "registry:item",
      "title": "Vitest Setup",
      "description": "A Vitest setup with project defaults and docs.",
      "files": [
        {
          "path": "config/vitest.config.ts",
          "type": "registry:file",
          "target": "~/vitest.config.ts"
        },
        {
          "path": "test/setup.ts",
          "type": "registry:file",
          "target": "~/test/setup.ts"
        },
        {          "path": "docs/testing.md",
          "type": "registry:file",
          "target": "~/docs/testing.md"
        }
      ]
    }
  ]
}
```

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

### example-style.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Custom style that extends shadcn/ui

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "example-style",
  "type": "registry:style",
  "dependencies": ["@tabler/icons-react"],
  "registryDependencies": [
    "login-01",
    "calendar",
    "https://example.com/r/editor.json"
  ],
  "cssVars": {
    "theme": {
      "font-sans": "Inter, sans-serif"
    },
    "light": {
      "brand": "20 14.3% 4.1%"
    },
    "dark": {
      "brand": "20 14.3% 4.1%"
    }
  }
}
```

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

### Accessing Message Scroller Scroll State (TypeScript)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/radix/message-scroller.mdx

Destructure `useMessageScrollerScrollable` to get `start` and `end` boolean flags, indicating if the scroller can still scroll towards the beginning or end of the list.

```tsx
const { start, end } = useMessageScrollerScrollable()
```

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

### Apply a custom theme preset

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/new.mdx

Apply a custom theme to your project using a preset code.

```bash
npx shadcn@latest init --preset [CODE]
```

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

### Anchoring a User Message in Message Scroller Item (TSX)

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/radix/message-scroller.mdx

Use the `scrollAnchor` prop on a `MessageScrollerItem` to designate a specific row as the start of a new conversation turn. This example anchors the item if the message role is 'user'.

```tsx
// This tells the scroller to anchor the user's message for the next turn.
<MessageScrollerItem
  messageId={message.id}
  scrollAnchor={message.role === "user"}
/>
```

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

### example-combined.json

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx

Demonstrates a registry item configuration combining both "@import" and "@plugin" directives, showing their relative ordering.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combined-example",
  "type": "registry:item",
  "dependencies": ["@tailwindcss/typography", "tw-animate-css"],
  "css": {
    "@import \"tailwindcss\"": {},
    "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\")": {},
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"tw-animate-css\"": {},
    "@layer base": {
      "body": {
        "font-family": "Inter, sans-serif"
      }
    },
    "@utility content-auto": {
      "content-visibility": "auto"
    }
  }
}
```

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

### Initialize project

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/components-json.mdx

Command to create a components.json file.

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

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

### Get shadcn/ui Project Context

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/SKILL.md

Use this command to retrieve the current shadcn/ui project configuration and installed components. The output is in JSON format. Remember to use the appropriate package runner (npx, pnpm dlx, or bunx) for your project.

```shell
!`npx shadcn@latest info --json`
```

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

### New Example File Content

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/examples/README.md

Example content for a new .tsx file in examples/base or examples/radix.

```tsx
// examples/base/button-loading.tsx
import { Button } from "@/styles/base-nova/ui/button"

export function ButtonLoading() {
  return <Button disabled>Loading...</Button>
}
```

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

### Initialize shadcn Project with Preset (No Reinstall)

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/SKILL.md

Initialize a shadcn project with a specified preset without reinstalling components, used for merging or skipping component updates.

```bash
npx shadcn@latest init --preset <code> --force --no-reinstall
```

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

### Manual Installation Dependencies

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/aspect-ratio.mdx

Install the required dependencies for manual installation of the Aspect Ratio component.

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

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

### Install Button dependency for manual Attachment installation

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/attachment.mdx

Install the required Button component dependency before manually adding the Attachment component.

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

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

### Initialize shadcn/ui Project with Preset

Source: https://github.com/shadcn-ui/ui/blob/main/skills/shadcn/cli.md

Use this command to initialize a new shadcn/ui project with a specified preset. The '<code>' placeholder should be replaced with a named preset, code, or URL.

```bash
npx shadcn@latest init --preset <code>
```

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

### Installation

Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/base/command.mdx

Install the `cmdk` dependency manually.

```bash
npm install cmdk
```