TITLE: Serve shadcn-ui registry with development server
DESCRIPTION: This command starts the development server for your project, typically a Next.js application. Once running, the generated registry JSON files become accessible via HTTP, for example, at `http://localhost:3000/r/[NAME].json`.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/getting-started.mdx#_snippet_7

LANGUAGE: bash
CODE:
```
npm run dev
```

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

TITLE: Create a Basic React Component for Registry Inclusion
DESCRIPTION: Provides a simple React component example (`HelloWorld`) utilizing a Shadcn UI Button. This component serves as a template for items to be added to the component registry.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/getting-started.mdx#_snippet_1

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

export function HelloWorld() {
  return <Button>Hello World</Button>
}
```

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

TITLE: Serve Local Registry for Development
DESCRIPTION: Command to start the development server, typically for a Next.js application. This makes the generated registry JSON files accessible locally, allowing for testing and development of the component registry.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/getting-started.mdx#_snippet_6

LANGUAGE: bash
CODE:
```
npm run dev
```

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

TITLE: Create a basic React component for shadcn-ui registry
DESCRIPTION: This example demonstrates a simple React component using a shadcn-ui Button. It illustrates how to define a component that can be included in the registry, typically placed within a structured directory like `registry/new-york/hello-world/hello-world.tsx`.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/getting-started.mdx#_snippet_1

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

export function HelloWorld() {
  return <Button>Hello World</Button>
}
```

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

TITLE: Configure package.json for Registry Build Script
DESCRIPTION: Demonstrates adding a custom `registry:build` script to the `scripts` section of `package.json`. This script invokes the `shadcn build` command, automating the registry generation process.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/getting-started.mdx#_snippet_4

LANGUAGE: json
CODE:
```
{
  "scripts": {
    "registry:build": "shadcn build"
  }
}
```

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

TITLE: Register a Component Definition in registry.json
DESCRIPTION: Illustrates how to add a component's metadata and file path to the `items` array within `registry.json`. This step links the physical component file to its registry entry, specifying its name, type, title, description, and file location.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/getting-started.mdx#_snippet_2

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/new-york/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  ]
}
```

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

TITLE: Initialize registry.json for Shadcn UI Component Registry
DESCRIPTION: Defines the foundational `registry.json` file structure, including schema, registry name, homepage, and an empty `items` array. This file is essential for the `shadcn` CLI to manage and build the component registry.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/getting-started.mdx#_snippet_0

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    // ...
  ]
}
```

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

TITLE: Initialize registry.json for shadcn-ui component registry
DESCRIPTION: This JSON configuration file defines the schema, name, homepage, and an empty items array for a shadcn-ui component registry. It is a foundational step required when using the `shadcn` CLI to build your registry.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/getting-started.mdx#_snippet_0

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    // ...
  ]
}
```

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

TITLE: Complete registry.json Example Structure
DESCRIPTION: Demonstrates the full structure of a `registry.json` file, including the schema reference, registry metadata (name, homepage), and an example of a component item within the `items` array.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/registry-json.mdx#_snippet_0

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "shadcn",
  "homepage": "https://ui.shadcn.com",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/new-york/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  ]
}
```

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

TITLE: Add a component definition to registry.json
DESCRIPTION: This `registry.json` snippet shows how to define a component item within the registry's `items` array. It includes the component's name, type, title, description, and the relative path to its source file, conforming to the registry item schema.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/getting-started.mdx#_snippet_3

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/new-york/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  ]
}
```

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

TITLE: Execute Shadcn Registry Build Process
DESCRIPTION: Command to run the `registry:build` script defined in `package.json`. This initiates the `shadcn` CLI's build process, generating the necessary JSON files for the component registry.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/getting-started.mdx#_snippet_5

LANGUAGE: bash
CODE:
```
npm run registry:build
```

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

TITLE: Complete registry.json Example Structure
DESCRIPTION: Demonstrates the full structure of a `registry.json` file, including the schema reference, registry metadata (name, homepage), and an example of a component item within the `items` array.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/registry-json.mdx#_snippet_0

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "shadcn",
  "homepage": "https://ui.shadcn.com",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/new-york/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  ]
}
```

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

TITLE: Add registry build script to package.json
DESCRIPTION: This snippet adds a `registry:build` script to your `package.json` file. This allows you to easily execute the `shadcn build` command by running `npm run registry:build` from your terminal.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/getting-started.mdx#_snippet_5

LANGUAGE: json
CODE:
```
{
  "scripts": {
    "registry:build": "shadcn build"
  }
}
```

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

TITLE: Install Shadcn CLI Canary Version via npm
DESCRIPTION: Command to install the `shadcn` command-line interface, specifically targeting the `canary` release. This version is necessary to access the `build` command for registry generation.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/getting-started.mdx#_snippet_3

LANGUAGE: bash
CODE:
```
npm install shadcn@canary
```

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

TITLE: shadcn init Command Reference
DESCRIPTION: Comprehensive API documentation for the `shadcn init` command, detailing its arguments and options for project initialization.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/cli.mdx#_snippet_1

LANGUAGE: APIDOC
CODE:
```
Usage: shadcn init [options] [components...]

initialize your project and install dependencies

Arguments:
  components         the components to add or a url to the component.

Options:
  -y, --yes           skip confirmation prompt. (default: true)
  -d, --defaults,     use default configuration. (default: false)
  -f, --force         force overwrite of existing configuration. (default: false)
  -c, --cwd <cwd>     the working directory. defaults to the current directory. (default: "/Users/shadcn/Desktop")
  -s, --silent        mute output. (default: false)
  --src-dir           use the src directory when creating a new project. (default: false)
  --no-src-dir        do not use the src directory when creating a new project.
  --css-variables     use css variables for theming. (default: true)
  --no-css-variables  do not use css variables for theming.
  -h, --help          display help for command
```

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

TITLE: Example Block File Structure
DESCRIPTION: Shows an example file organization for a complex block, including a main page component, sub-components, hooks, and utility functions within its dedicated directory.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/blocks.mdx#_snippet_5

LANGUAGE: txt
CODE:
```
dashboard-01
└── page.tsx
└── components
    └── hello-world.tsx
    └── example-card.tsx
└── hooks
    └── use-hello-world.ts
└── lib
    └── format-date.ts
```

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

TITLE: Install Shadcn UI Registry Item via CLI
DESCRIPTION: This command demonstrates how to install a component from a local or remote shadcn UI registry using the `shadcn` CLI's `add` command. It specifies the URL of the registry item to be added to the project.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/getting-started.mdx#_snippet_7

LANGUAGE: bash
CODE:
```
npx shadcn@latest add http://localhost:3000/r/hello-world.json
```

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

TITLE: Complete registry-item.json schema example
DESCRIPTION: A comprehensive example demonstrating the full structure and typical properties of a `registry-item.json` file, including schema reference, name, type, title, description, file paths, CSS variables, and dependencies.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/registry-item-json.mdx#_snippet_0

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hello-world",
  "type": "registry:block",
  "title": "Hello World",
  "description": "A simple hello world component.",
  "files": [
    {
      "path": "registry/new-york/hello-world/hello-world.tsx",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/hello-world/use-hello-world.ts",
      "type": "registry:hook"
    }
  ],
  "cssVars": {
    "theme": {
      "font-heading": "Poppins, sans-serif"
    },
    "light": {
      "brand": "20 14.3% 4.1%"
    },
    "dark": {
      "brand": "20 14.3% 4.1%"
    }
  }
}
```

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

TITLE: Install Shadcn UI Registry Item via CLI
DESCRIPTION: This command demonstrates how to install a component from a local or remote shadcn UI registry using the `shadcn` CLI's `add` command. It specifies the URL of the registry item to be added to the project.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/getting-started.mdx#_snippet_8

LANGUAGE: bash
CODE:
```
npx shadcn@latest add http://localhost:3000/r/hello-world.json
```

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

TITLE: SidebarProvider Component API Reference
DESCRIPTION: Detailed API documentation for the `SidebarProvider` component, which is essential for providing the sidebar context to other sidebar-related components. It supports both uncontrolled (`defaultOpen`) and controlled (`open`, `onOpenChange`) modes for managing the sidebar's open state.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/components/sidebar.mdx#_snippet_7

LANGUAGE: APIDOC
CODE:
```
SidebarProvider Component:
  Description: Provides the sidebar context to the Sidebar component. You should always wrap your application in a `SidebarProvider` component.
  Props:
    defaultOpen:
      Type: boolean
      Description: Default open state of the sidebar (uncontrolled).
    open:
      Type: boolean
      Description: Open state of the sidebar (controlled).
    onOpenChange:
      Type: (open: boolean) => void
      Description: Callback function that sets the open state of the sidebar (controlled).
```

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

TITLE: Start Development Server
DESCRIPTION: Starts the local development server for the `www` application, allowing live preview and testing of changes made to the blocks.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/blocks.mdx#_snippet_3

LANGUAGE: bash
CODE:
```
pnpm www:dev
```

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

TITLE: Universal Registry Item for Multi-File Starter Template
DESCRIPTION: This example illustrates a universal registry item designed to install multiple files, such as those for a custom starter template. It demonstrates how to define multiple file targets within a single registry item, and also includes an optional 'dependencies' field.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx#_snippet_17

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "my-custom-start-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": "..."
    }
  ]
}
```

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

TITLE: Basic Tooltip usage example in TypeScript/React
DESCRIPTION: This example illustrates a fundamental implementation of the Tooltip component. It shows how to wrap a trigger element and provide content that will be displayed when the trigger is hovered over or focused.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/tooltip.mdx#_snippet_3

LANGUAGE: tsx
CODE:
```
<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>
```

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

TITLE: Execute shadcn registry build script
DESCRIPTION: This command runs the `registry:build` script, which in turn executes the `shadcn build` command. This process generates the necessary registry JSON files, typically outputting them to the `public/r` directory.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/getting-started.mdx#_snippet_6

LANGUAGE: bash
CODE:
```
npm run registry:build
```

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

TITLE: React Table Pagination API Methods
DESCRIPTION: API methods provided by `@tanstack/react-table` for controlling and querying pagination state. These methods allow programmatic navigation and checking of pagination capabilities.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/data-table.mdx#_snippet_10

LANGUAGE: APIDOC
CODE:
```
table.previousPage(): void
  - Navigates to the previous page of the table data.
  - Returns: void

table.nextPage(): void
  - Navigates to the next page of the table data.
  - Returns: void

table.getCanPreviousPage(): boolean
  - Checks if there is a previous page available.
  - Returns: boolean (true if a previous page exists, false otherwise)

table.getCanNextPage(): boolean
  - Checks if there is a next page available.
  - Returns: boolean (true if a next page exists, false otherwise)
```

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

TITLE: Start Development Server
DESCRIPTION: Starts the local development server for the UI project, enabling live preview and testing of components.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/(root)/blocks.mdx#_snippet_3

LANGUAGE: bash
CODE:
```
pnpm www:dev
```

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

TITLE: Start Remix development server
DESCRIPTION: This command starts the Remix application in development mode. It enables live reloading and asset rebuilding on file changes, facilitating rapid development and immediate feedback on code modifications.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/test/fixtures/frameworks/remix-indie-stack/README.md#_snippet_3

LANGUAGE: sh
CODE:
```
npm run dev
```

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

TITLE: React Table Pagination API Methods
DESCRIPTION: API methods provided by `@tanstack/react-table` for controlling and querying pagination state. These methods allow programmatic navigation and checking of pagination capabilities.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/components/data-table.mdx#_snippet_10

LANGUAGE: APIDOC
CODE:
```
table.previousPage(): void
  - Navigates to the previous page of the table data.
  - Returns: void

table.nextPage(): void
  - Navigates to the next page of the table data.
  - Returns: void

table.getCanPreviousPage(): boolean
  - Checks if there is a previous page available.
  - Returns: boolean (true if a previous page exists, false otherwise)

table.getCanNextPage(): boolean
  - Checks if there is a next page available.
  - Returns: boolean (true if a next page exists, false otherwise)
```

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

TITLE: Install shadcn CLI canary version
DESCRIPTION: This command installs the `shadcn` command-line interface, specifically targeting the `canary` version. The `canary` version is necessary to access the `build` command, which is used for generating registry JSON files.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/getting-started.mdx#_snippet_4

LANGUAGE: bash
CODE:
```
npm install shadcn@canary
```

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

TITLE: Example Usage of OpenInV0Button Component
DESCRIPTION: This snippet demonstrates how to integrate the `OpenInV0Button` component into a React application. It shows how to pass a specific URL to the component's `url` prop, which will then be used to construct the v0.dev API link for opening the registry item.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/open-in-v0.mdx#_snippet_2

LANGUAGE: jsx
CODE:
```
<OpenInV0Button url="https://example.com/r/hello-world.json" />
```

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

TITLE: SidebarProvider Component API Reference
DESCRIPTION: Detailed API documentation for the `SidebarProvider` component, which manages the open state of the sidebar. It supports both uncontrolled (`defaultOpen`) and controlled (`open`, `onOpenChange`) modes for managing sidebar visibility.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/sidebar.mdx#_snippet_6

LANGUAGE: APIDOC
CODE:
```
SidebarProvider Props:
- Name: `defaultOpen`
  Type: `boolean`
  Description: Default open state of the sidebar (uncontrolled).
- Name: `open`
  Type: `boolean`
  Description: Open state of the sidebar (controlled).
- Name: `onOpenChange`
  Type: `(open: boolean) => void`
  Description: Callback function that sets the open state of the sidebar when in controlled mode.
```

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

TITLE: shadcn add Command Reference
DESCRIPTION: Comprehensive API documentation for the `shadcn add` command, detailing its arguments and options for adding components.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/cli.mdx#_snippet_3

LANGUAGE: APIDOC
CODE:
```
Usage: shadcn add [options] [components...]

add a component to your project

Arguments:
  components         the components to add or a url to the component.

Options:
  -y, --yes           skip confirmation prompt. (default: false)
  -o, --overwrite     overwrite existing files. (default: false)
  -c, --cwd <cwd>     the working directory. defaults to the current directory. (default: "/Users/shadcn/Desktop")
  -a, --all           add all available components (default: false)
  -p, --path <path>   the path to add the component to.
  -s, --silent        mute output. (default: false)
  --src-dir           use the src directory when creating a new project. (default: false)
  --no-src-dir        do not use the src directory when creating a new project.
  --css-variables     use css variables for theming. (default: true)
  --no-css-variables  do not use css variables for theming.
  -h, --help          display help for command
```

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

TITLE: Registry Item for Custom Cursor Python Rules
DESCRIPTION: This example demonstrates a shadcn/ui registry item configuration for installing custom Cursor rules specifically for Python. It defines a single file target within the user's Cursor rules directory.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx#_snippet_15

LANGUAGE: json
CODE:
```
{
  "$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": "..."
    }
  ]
}
```

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

TITLE: Add simple custom utility to shadcn/ui
DESCRIPTION: This JSON configuration defines a custom registry item named 'custom-component'. It allows adding a simple custom CSS utility to the shadcn/ui styling system using `@utility`. This example defines a `content-auto` utility that sets `content-visibility` to `auto`.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/examples.mdx#_snippet_10

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "css": {
    "@utility content-auto": {
      "content-visibility": "auto"
    }
  }
}
```

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

TITLE: shadcn build Command Reference
DESCRIPTION: Comprehensive API documentation for the `shadcn build` command, detailing its arguments and options for generating registry files.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/cli.mdx#_snippet_6

LANGUAGE: APIDOC
CODE:
```
Usage: shadcn build [options] [registry]

build components for a shadcn registry

Arguments:
  registry             path to registry.json file (default: "./registry.json")

Options:
  -o, --output <path>  destination directory for json files (default: "./public/r")
  -c, --cwd <cwd>      the working directory. defaults to the current directory. (default:
                       "/Users/shadcn/Code/shadcn/ui/packages/shadcn")
  -h, --help           display help for command
```

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

TITLE: Define a Custom shadcn/ui Block
DESCRIPTION: This JSON configuration defines a custom `shadcn/ui` block named `login-01`. It includes a description and lists its `registryDependencies` such as `button`, `card`, `input`, and `label`. The `files` array specifies the components and pages that constitute this block, including their paths, content (truncated for brevity), types (`registry:page`, `registry:component`), and target locations within the project structure.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx#_snippet_4

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "login-01",
  "type": "registry:block",
  "description": "A simple login form.",
  "registryDependencies": ["button", "card", "input", "label"],
  "files": [
    {
      "path": "blocks/login-01/page.tsx",
      "content": "import { LoginForm } ...",
      "type": "registry:page",
      "target": "app/login/page.tsx"
    },
    {
      "path": "blocks/login-01/components/login-form.tsx",
      "content": "...",
      "type": "registry:component"
    }
  ]
}
```

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

TITLE: Subscribing to Carousel Events in React
DESCRIPTION: This example illustrates how to listen for specific events emitted by the carousel API instance. It uses a `useEffect` hook to ensure the event listener is attached only when the API is available, demonstrating a common pattern for reacting to carousel state changes like 'select'.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/carousel.mdx#_snippet_11

LANGUAGE: tsx
CODE:
```
import { type CarouselApi } from "@/components/ui/carousel"

export function Example() {
  const [api, setApi] = React.useState<CarouselApi>()

  React.useEffect(() => {
    if (!api) {
      return
    }

    api.on("select", () => {
      // Do something on select.
    })
  }, [api])

  return (
    <Carousel setApi={setApi}>
      <CarouselContent>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
      </CarouselContent>
    </Carousel>
  )
}
```

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

TITLE: registry.json Schema Property Definitions
DESCRIPTION: Detailed specification of the properties available in the `registry.json` schema, including their types, descriptions, and usage examples.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/registry-json.mdx#_snippet_1

LANGUAGE: APIDOC
CODE:
```
registry.json Schema Definition:

Property: $schema
  Type: string
  Description: Specifies the JSON Schema URI that this registry.json file conforms to. This is used for validation and IDE auto-completion.
  Example: "https://ui.shadcn.com/schema/registry.json"

Property: name
  Type: string
  Description: The unique name of your custom component registry. This value is typically used for data attributes and other metadata within applications consuming the registry.
  Example: "acme"

Property: homepage
  Type: string (URL)
  Description: The URL of the registry's homepage. Similar to 'name', this is used for metadata and linking purposes.
  Example: "https://acme.com"

Property: items
  Type: array of objects (registry-item schema)
  Description: A collection of component definitions that constitute the registry. Each object in this array must adhere to the 'registry-item' schema specification.
  Example Structure for an item:
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/new-york/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  Reference: See the registry-item schema documentation for detailed structure of each item.
```

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

TITLE: Subscribing to Carousel Events in React
DESCRIPTION: This example illustrates how to listen for specific events emitted by the carousel API instance. It uses a `useEffect` hook to ensure the event listener is attached only when the API is available, demonstrating a common pattern for reacting to carousel state changes like 'select'.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/components/carousel.mdx#_snippet_11

LANGUAGE: tsx
CODE:
```
import { type CarouselApi } from "@/components/ui/carousel"

export function Example() {
  const [api, setApi] = React.useState<CarouselApi>()

  React.useEffect(() => {
    if (!api) {
      return
    }

    api.on("select", () => {
      // Do something on select.
    })
  }, [api])

  return (
    <Carousel setApi={setApi}>
      <CarouselContent>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
      </CarouselContent>
    </Carousel>
  )
}
```

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

TITLE: Add functional custom utility to shadcn/ui
DESCRIPTION: This JSON configuration defines a custom registry item named 'custom-component'. It allows adding a functional custom CSS utility to the shadcn/ui styling system using `@utility`. This example defines a `tab-*` utility that sets `tab-size` based on a variable, enabling dynamic utility classes.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/examples.mdx#_snippet_12

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "css": {
    "@utility tab-*": {
      "tab-size": "var(--tab-size-*)"
    }
  }
}
```

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

TITLE: registry.json Schema Property Definitions
DESCRIPTION: Detailed specification of the properties available in the `registry.json` schema, including their types, descriptions, and usage examples.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/registry-json.mdx#_snippet_1

LANGUAGE: APIDOC
CODE:
```
registry.json Schema Definition:

Property: $schema
  Type: string
  Description: Specifies the JSON Schema URI that this registry.json file conforms to. This is used for validation and IDE auto-completion.
  Example: "https://ui.shadcn.com/schema/registry.json"

Property: name
  Type: string
  Description: The unique name of your custom component registry. This value is typically used for data attributes and other metadata within applications consuming the registry.
  Example: "acme"

Property: homepage
  Type: string (URL)
  Description: The URL of the registry's homepage. Similar to 'name', this is used for metadata and linking purposes.
  Example: "https://acme.com"

Property: items
  Type: array of objects (registry-item schema)
  Description: A collection of component definitions that constitute the registry. Each object in this array must adhere to the 'registry-item' schema specification.
  Example Structure for an item:
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/new-york/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  Reference: See the registry-item schema documentation for detailed structure of each item.
```

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

TITLE: Basic Tooltip Component Usage Example in React
DESCRIPTION: This example demonstrates the fundamental structure for implementing a Tooltip. It wraps a `TooltipTrigger` (the element that activates the tooltip) and provides content within `TooltipContent`, all managed by a `TooltipProvider`.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/components/tooltip.mdx#_snippet_3

LANGUAGE: tsx
CODE:
```
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
```

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

TITLE: Run initial project setup script
DESCRIPTION: This command executes the `setup` script defined in the project's `package.json`. It is typically used for installing dependencies, running database migrations, or performing other initial configuration tasks required before starting development.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/test/fixtures/frameworks/remix-indie-stack/README.md#_snippet_2

LANGUAGE: sh
CODE:
```
npm run setup
```

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

TITLE: Create a New shadcn/ui Style from Scratch
DESCRIPTION: This JSON configuration demonstrates how to define a completely new `shadcn/ui` style without extending the default framework, indicated by `"extends": "none"`. It includes new dependencies (`tailwind-merge`, `clsx`), integrates `shadcn/ui`'s `utils` registry item, and imports several remote components (`button`, `input`, `label`, `select`). The configuration also defines a comprehensive set of custom CSS variables (`main`, `bg`, `border`, `text`, `ring`) for both light and dark modes.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/examples.mdx#_snippet_1

LANGUAGE: json
CODE:
```
{
  "$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"
    }
  }
}
```

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

TITLE: Running Local Documentation
DESCRIPTION: Command to start the local development server for the project's documentation. The documentation is located within the `www` workspace and is written using MDX, allowing contributors to preview changes before submission.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md#_snippet_3

LANGUAGE: bash
CODE:
```
pnpm --filter=www dev
```

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

TITLE: Create a New shadcn/ui Style from Scratch
DESCRIPTION: This JSON configuration demonstrates how to define a completely new `shadcn/ui` style without extending the default framework, indicated by `"extends": "none"`. It includes new dependencies (`tailwind-merge`, `clsx`), integrates `shadcn/ui`'s `utils` registry item, and imports several remote components (`button`, `input`, `label`, `select`). The configuration also defines a comprehensive set of custom CSS variables (`main`, `bg`, `border`, `text`, `ring`) for both light and dark modes.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx#_snippet_1

LANGUAGE: json
CODE:
```
{
  "$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"
    }
  }
}
```

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

TITLE: Define a Custom shadcn/ui Block
DESCRIPTION: This JSON configuration defines a custom `shadcn/ui` block named `login-01`. It includes a description and lists its `registryDependencies` such as `button`, `card`, `input`, and `label`. The `files` array specifies the components and pages that constitute this block, including their paths, content (truncated for brevity), types (`registry:page`, `registry:component`), and target locations within the project structure.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/examples.mdx#_snippet_4

LANGUAGE: json
CODE:
```
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "login-01",
  "type": "registry:block",
  "description": "A simple login form.",
  "registryDependencies": ["button", "card", "input", "label"],
  "files": [
    {
      "path": "blocks/login-01/page.tsx",
      "content": "import { LoginForm } ...",
      "type": "registry:page",
      "target": "app/login/page.tsx"
    },
    {
      "path": "blocks/login-01/components/login-form.tsx",
      "content": "...",
      "type": "registry:component"
    }
  ]
}
```

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

TITLE: Registry Item for Custom ESLint Configuration
DESCRIPTION: This configuration shows how to create a universal registry item to install a custom ESLint configuration file. The item targets the standard .eslintrc.json file in the user's home directory.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/examples.mdx#_snippet_16

LANGUAGE: json
CODE:
```
{
  "$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": "..."
    }
  ]
}
```

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

TITLE: Configure Tailwind CSS to scan registry directories
DESCRIPTION: This configuration snippet for `tailwind.config.ts` ensures that Tailwind CSS correctly scans files within the `registry` directory for utility classes. This is essential for applying styles to components located in custom registry paths.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/registry/getting-started.mdx#_snippet_2

LANGUAGE: ts
CODE:
```
// tailwind.config.ts
export default {
  content: ["./registry/**/*.{js,ts,jsx,tsx}"],
}
```

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

TITLE: Initial Repository Setup
DESCRIPTION: Instructions for setting up the shadcn/ui repository locally, including cloning the repository, navigating into its directory, creating a new Git branch for development, and installing all project dependencies using pnpm.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md#_snippet_0

LANGUAGE: bash
CODE:
```
git clone https://github.com/your-username/ui.git
```

LANGUAGE: bash
CODE:
```
cd ui
```

LANGUAGE: bash
CODE:
```
git checkout -b my-new-branch
```

LANGUAGE: bash
CODE:
```
pnpm install
```

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

TITLE: useSidebar Hook API Reference
DESCRIPTION: Comprehensive API documentation for the `useSidebar` hook, detailing all available properties and their types. This hook provides essential state and functions for controlling sidebar behavior, including its expanded/collapsed state, mobile responsiveness, and open/close toggling.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/sidebar.mdx#_snippet_15

LANGUAGE: APIDOC
CODE:
```
useSidebar Hook Properties:

state: 'expanded' | 'collapsed'
  - Description: The current state of the sidebar.

open: boolean
  - Description: Whether the sidebar is open.

setOpen: (open: boolean) => void
  - Description: Sets the open state of the sidebar.

openMobile: boolean
  - Description: Whether the sidebar is open on mobile.

setOpenMobile: (open: boolean) => void
  - Description: Sets the open state of the sidebar on mobile.

isMobile: boolean
  - Description: Whether the sidebar is on mobile.

toggleSidebar: () => void
  - Description: Toggles the sidebar. Desktop and mobile.
```

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

TITLE: Example: Add Specific shadcn UI Component
DESCRIPTION: Demonstrates how to add a specific component, such as 'alert-dialog', to your project using the `shadcn add` command. This is a practical application of the component addition functionality.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/README.md#_snippet_2

LANGUAGE: bash
CODE:
```
npx shadcn add alert-dialog
```

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

TITLE: Accessing Carousel API and Tracking Slide Changes in React
DESCRIPTION: This snippet demonstrates how to obtain the carousel API instance using React's `useState` and `setApi` prop. It then uses `useEffect` to initialize slide count and current slide, and to subscribe to the 'select' event for real-time updates, enabling dynamic display of carousel progress.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/carousel.mdx#_snippet_10

LANGUAGE: tsx
CODE:
```
import { type CarouselApi } from "@/components/ui/carousel"

export function Example() {
  const [api, setApi] = React.useState<CarouselApi>()
  const [current, setCurrent] = React.useState(0)
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (!api) {
      return
    }

    setCount(api.scrollSnapList().length)
    setCurrent(api.selectedScrollSnap() + 1)

    api.on("select", () => {
      setCurrent(api.selectedScrollSnap() + 1)
    })
  }, [api])

  return (
    <Carousel setApi={setApi}>
      <CarouselContent>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
      </CarouselContent>
    </Carousel>
  )
}
```

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

TITLE: Example for description property in registry-item.json
DESCRIPTION: Illustrates the `description` property, providing a longer, more detailed explanation of the registry item's purpose, functionality, or usage.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/registry-item-json.mdx#_snippet_5

LANGUAGE: json
CODE:
```
{
  "description": "A simple hello world component."
}
```

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

TITLE: v0.dev Registry Integration API Endpoint
DESCRIPTION: Describes the API endpoint for opening publicly accessible registry items directly within v0.dev. This allows external registries to provide a direct 'Open in v0' functionality, redirecting users to v0.dev with the specified item loaded. Note that the functionality does not support 'cssVars' and 'tailwind' properties.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/registry/open-in-v0.mdx#_snippet_0

LANGUAGE: APIDOC
CODE:
```
Endpoint: GET https://v0.dev/chat/api/open?url=[URL]
  - Description: Opens a publicly accessible registry item URL in v0.dev.
  - Parameters:
    - url (string, required): The URL of the registry item to open. Must be publicly accessible.
  - Returns: Redirects the user to v0.dev with the specified item loaded.
  - Usage Example: https://v0.dev/chat/api/open?url=https://ui.shadcn.com/r/styles/new-york/login-01.json
  - Notes: The 'Open in v0' functionality does not support 'cssVars' and 'tailwind' properties for the opened item.
```

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

TITLE: Configure shadcn/ui components.json
DESCRIPTION: An example of the interactive prompt for configuring `components.json` during shadcn/ui initialization. This step allows users to define preferences like the base color for components.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/remix.mdx#_snippet_2

LANGUAGE: bash
CODE:
```
Which color would you like to use as base color? › Neutral
```

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

TITLE: Update InputOTPSlot for Composition API
DESCRIPTION: This diff shows the necessary changes to `input-otp.tsx` to transition from a render props pattern to a composition-based API for `InputOTPSlot`. It updates imports and modifies the `InputOTPSlot` component to use `OTPInputContext` for accessing slot data, improving component reusability and maintainability.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/components/input-otp.mdx#_snippet_6

LANGUAGE: diff
CODE:
```
- import { OTPInput, SlotProps } from "input-otp"
+ import { OTPInput, OTPInputContext } from "input-otp"

 const InputOTPSlot = React.forwardRef<
   React.ElementRef<"div">,
-   SlotProps & React.ComponentPropsWithoutRef<"div">
-  >(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {
+   React.ComponentPropsWithoutRef<"div"> & { index: number }
+  >(({ index, className, ...props }, ref) => {
+   const inputOTPContext = React.useContext(OTPInputContext)
+   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
```

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

TITLE: Import app.css into TanStack Start Root Route
DESCRIPTION: Modifies `app/routes/__root.tsx` to import the `app.css` stylesheet as a URL and link it in the document's head, ensuring global styles are applied.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/installation/tanstack.mdx#_snippet_3

LANGUAGE: tsx
CODE:
```
import type { ReactNode } from "react"
import { Outlet, createRootRoute } from "@tanstack/react-router"
import { Meta, Scripts } from "@tanstack/start"

import appCss from "@/styles/app.css?url"

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: "TanStack Start Starter",
      },
    ],
    links: [
      {
        rel: "stylesheet",
        href: appCss,
      },
    ],
  }),
  component: RootComponent,
})
```

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

TITLE: Accessing Carousel API and Tracking Slide Changes in React
DESCRIPTION: This snippet demonstrates how to obtain the carousel API instance using React's `useState` and `setApi` prop. It then uses `useEffect` to initialize slide count and current slide, and to subscribe to the 'select' event for real-time updates, enabling dynamic display of carousel progress.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/www/content/docs/components/carousel.mdx#_snippet_10

LANGUAGE: tsx
CODE:
```
import { type CarouselApi } from "@/components/ui/carousel"

export function Example() {
  const [api, setApi] = React.useState<CarouselApi>()
  const [current, setCurrent] = React.useState(0)
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (!api) {
      return
    }

    setCount(api.scrollSnapList().length)
    setCurrent(api.selectedScrollSnap() + 1)

    api.on("select", () => {
      setCurrent(api.selectedScrollSnap() + 1)
    })
  }, [api])

  return (
    <Carousel setApi={setApi}>
      <CarouselContent>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
      </CarouselContent>
    </Carousel>
  )
}
```

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

TITLE: Example React component using shadcn/ui Button
DESCRIPTION: Demonstrates how to import and use the `Button` component from shadcn/ui within a simple React functional component. This example shows a basic usage of the added component.
SOURCE: https://github.com/shadcn-ui/ui/blob/main/apps/v4/content/docs/installation/gatsby.mdx#_snippet_7

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

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```