### Get Project Info

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/SKILL.md

Fetches the current project configuration and installed components in JSON format. Use this to understand your project's setup.

```Bash
npx shadcn-vue@latest info --json
```

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

### Installation Guide

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/button-group.md

Instructions for installing the Button Group component using either the CLI or manual installation method.

```APIDOC
## Installation

### CLI Installation

The quickest way to install the Button Group component:

```bash
npx shadcn-vue@latest add button-group
```

### Manual Installation

If you prefer to install manually:

1. Install the required dependency:

```bash
npm install reka-ui
```

2. Copy and paste the source code from the [GitHub repository](https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/button-group) into your project.

3. Update the import paths to match your project setup.
```

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

### Custom Documentation for CLI Installation

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/registry/registry-item-json.md

Provide custom documentation or messages to be displayed in the CLI when a registry item is installed. This is useful for guiding users on necessary setup steps.

```json
{
  "docs": "Remember to add the FOO_BAR environment variable to your .env file."
}
```

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

### Installation

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/spinner.md

Methods to add the Spinner component to your project via CLI or manual setup.

```APIDOC
## INSTALL Spinner

### Description
Install the component using the shadcn-vue CLI or manually by copying the source code.

### Parameters
#### CLI Command
- **command** (string) - npx shadcn-vue@latest add spinner

#### Manual Dependencies
- **reka-ui** (package) - Required dependency for manual installation.

### Request Example
```bash
npx shadcn-vue@latest add spinner
```
```

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

### Get Component Documentation

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/SKILL.md

Retrieves documentation and example URLs for a specific component. Use this to learn about a component's usage and available options.

```Bash
npx shadcn-vue@latest docs <component>
```

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

### Installation

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/input-group.md

Instructions for installing the Input Group component using CLI or manual setup. The component requires reka-ui as a dependency.

```APIDOC
## Installation

### CLI Installation
```bash
npx shadcn-vue@latest add input-group
```

### Manual Installation

1. Install dependencies:
```bash
npm install reka-ui
```

2. Copy the source code from [GitHub](https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/input-group) into your project.

3. Update the import paths to match your project setup.

### Import
```vue
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from '@/components/ui/input-group'
```
```

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

### Add Component Examples

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/scripts/QUICKSTART.md

Commands to create example files for a component and trigger the registry build to include them in the registry output.

```bash
# Create example folder and files
mkdir -p registry/bases/my-base/examples/button
touch registry/bases/my-base/examples/button/ButtonBasic.vue
touch registry/bases/my-base/examples/button/ButtonWithIcon.vue

# Build
pnpm run registry:build
```

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

### Create Laravel Project with Vue

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/installation/04.laravel.md

This command initializes a new Laravel application named 'my-app' and configures it to use Vue. It leverages the Laravel installer to streamline project setup.

```bash
laravel new my-app --vue
```

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

### Get Component Documentation URLs

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/cli.md

Outputs resolved URLs for component documentation, examples, and API references. Fetch these URLs to access the actual content.

```bash
npx shadcn-vue@latest docs <components...>
```

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

### Install Dependencies with Multiple Package Managers

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/README.md

Install project dependencies using npm, pnpm, yarn, or bun. This is the first step after cloning the project. Choose one package manager based on your project setup.

```bash
npm install
```

```bash
pnpm install
```

```bash
yarn install
```

```bash
bun install
```

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

### Install Input OTP component using shadcn-vue CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/input-otp.md

This snippet demonstrates how to install the Input OTP component using the shadcn-vue CLI. This command automatically adds the necessary files and dependencies to your project, simplifying the setup process.

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

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

### Install Label Component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/label.md

Quick installation command for the Label component using shadcn-vue CLI. This is the recommended method for adding the component to your project with automatic setup.

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

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

### Install Resizable Component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/resizable.md

Quick installation command using shadcn-vue CLI to add the resizable component to your project. This is the recommended installation method.

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

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

### Install Native Select

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/native-select.md

Install the component using the CLI or manually add the required reka-ui dependency.

```bash
npx shadcn-vue@latest add native-select
```

```bash
npm install reka-ui
```

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

### Install Badge via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/badge.md

Add the Badge component to your project using the shadcn-vue CLI tool for automated setup.

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

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

### Install Shadcn-Vue Nuxt module via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/installation/02.nuxt.md

This command installs the Shadcn-Vue Nuxt module using the `nuxi` CLI. This is the recommended way to add the module, simplifying the setup process and avoiding potential console warnings related to Nuxt's auto-import feature by handling module registration automatically.

```bash
npx nuxi@latest module add shadcn-nuxt
```

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

### Start MCP Server and Initialize Editor Configuration

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/mcp.md

Start the shadcn-vue MCP server for AI assistant integration and generate editor-specific configuration files.

```bash
shadcn-vue mcp        # start the MCP server (stdio)
```

```bash
shadcn-vue mcp init   # write config for your editor
```

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

### Install Spinner via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/spinner.md

Quick installation command for the Spinner component using shadcn-vue CLI.

```bash
npx shadcn-vue@latest add spinner
```

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

### Install Kbd component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/kbd.md

Quick installation command for the Kbd component using shadcn-vue CLI.

```bash
npx shadcn-vue@latest add kbd
```

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

### Example registry-item.json

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/registry/registry-item-json.md

This is a complete example of a `registry-item.json` file, defining a 'hello-world' block component with associated Vue and TypeScript files.

```json
{
  "$schema": "https://shadcn-vue.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/HelloWorld/HelloWorld.vue",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/HelloWorld/useHelloWorld.ts",
      "type": "registry:hook"
    }
  ]
}
```

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

### Install Context Menu Component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/context-menu.md

Quick installation command for the context menu component using the shadcn-vue CLI. This is the recommended installation method that automatically sets up all dependencies and component files.

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

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

### Install Navigation Menu via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/navigation-menu.md

Quick installation command for the Navigation Menu component using shadcn-vue CLI. This is the recommended installation method that automatically sets up the component with all required dependencies.

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

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

### Install Sonner via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/sonner.md

Quick installation command using shadcn-vue CLI to add the Sonner toast component to your project. This is the recommended installation method.

```bash
npx shadcn-vue@latest add sonner
```

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

### Install Field Component

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/field.md

Use this command to install the Field component and its dependencies.

```bash
npx shadcn-vue@latest add field
```

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

### Install Drawer Component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/drawer.md

Quick installation command for adding the Drawer component to a shadcn-vue project using the CLI tool. This is the recommended installation method for projects using shadcn-vue.

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

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

### Install Item component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/item.md

Install the Item component using the shadcn-vue CLI tool.

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

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

### Install Command Component Manually

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/command.md

Manually install the command component by adding dependencies and copying source code.

```bash
npm install reka-ui
```

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

### Install shadcn-vue with bun

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/SKILL.md

Installs shadcn-vue using bun's package runner. Use this command if your project uses bun.

```Bash
bunx --bun shadcn-vue@latest *
```

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

### Example shadcn-vue CLI prompt response

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/installation/01.vite.md

This snippet shows an example of a user's response during the `shadcn-vue` initialization process. It demonstrates selecting 'Neutral' as the base color when prompted by the CLI.

```text
Which color would you like to use as base color? › Neutral
```

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

### Install and Build Registry via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/registry/getting-started.md

Commands to install the latest shadcn-vue CLI and execute the build command to generate registry JSON files in the public directory.

```bash
npm install shadcn-vue@latest
npm run registry:build
```

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

### Install Sheet component

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/sheet.md

Instructions for installing the Sheet component using either the shadcn-vue CLI or manually via npm.

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

```bash
npm install reka-ui
```

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

### Fetch Documentation for Multiple Components

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/SKILL.md

Use this command to fetch documentation, examples, and API references for several components at once. This is crucial for staying updated with component usage.

```bash
npx shadcn-vue@latest docs button dialog select
```

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

### Install Dark Mode Dependencies

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/dark-mode/03.vitepress.md

Commands to install @vueuse/core for theme state management and optional icon libraries for the toggle UI.

```bash
npm install @vueuse/core
npm install -D @iconify/vue @iconify-json/radix-icons
```

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

### Initialize a New Project with a Preset

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/SKILL.md

Create a new project and initialize it with a specific UI preset and template. This sets up the project with predefined styles and configurations.

```bash
npx shadcn-vue@latest init --name my-app --preset nova
```

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

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

### Install shadcn-vue skill

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/skills.md

Install the shadcn-vue skill into your project using the skills CLI. The skill automatically loads when working with shadcn-vue components.

```bash
npx skills add unovue/shadcn-vue
```

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

### Init command options and usage

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/06.cli.md

Full usage reference for the init command including all available options for presets, templates, styles, icons, fonts, colors, and project configuration.

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

initialize your project and install dependencies

Arguments:
  components                     names, url or local path to component

Options:
  -p, --preset <preset>          use a preset configuration or URL. (reka-vega, reka-nova, reka-maia, reka-lyra, reka-mira, reka-luma, reka-sera)
  -t, --template <template>      the template to use. (nuxt, vite, astro, laravel)
  --base <base>                  the component library base to use. (reka)
  --style <style>                the visual style to use. (vega, nova, maia, lyra, mira, luma, sera)
  --icon-library <icon-library>  the icon library to use. (lucide, tabler, hugeicons, phosphor, remixicon)
  --font <font>                  the font to use. (inter, figtree, jetbrains-mono, geist, geist-mono)
  -b, --base-color <base-color>  the base color to use. (neutral, gray, zinc, stone, slate)
  -n, --name <name>              the name for the new project.
  -d, --defaults                 use default configuration. (default: false)
  -y, --yes                      skip confirmation prompt. (default: true)
  -f, --force                    force overwrite of existing configuration. (default: false)
  -c, --cwd <cwd>                the working directory. defaults to the current directory.
  -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.
  --reinstall                    re-install existing UI components.
  --no-reinstall                 do not re-install existing UI components.
  --rtl                          enable RTL support.
  --no-rtl                       disable RTL support.
  --pointer                      enable pointer cursor for buttons.
  --no-pointer                   disable pointer cursor for buttons.
  --css-variables                use css variables for theming. (default: true)
  --no-css-variables             do not use css variables for theming.
  --no-base-style                do not install the base shadcn style.
  -h, --help                     display help for command
```

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

### Install Pagination Component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/pagination.md

Quick installation command for the pagination component using shadcn-vue CLI. This is the recommended method for adding the component to your project.

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

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

### Install Reka UI Dependency Manually

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/button.md

Install the Reka UI dependency required for manual Button component setup.

```bash
npm install reka-ui
```

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

### Initialize project with init command

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/06.cli.md

Set up a new shadcn-vue project with dependencies and configuration. Use this as the first step when starting a new project.

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

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

### Install Shadcn-Vue Carousel via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/carousel.md

This command installs the Carousel component and its dependencies using the Shadcn-Vue CLI. It's the recommended method for quick setup.

```bash
npx shadcn-vue@latest add carousel
```

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

### Registry Build Output Example

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/scripts/FINAL_SUMMARY.md

Sample console output from the dynamic registry build process. Demonstrates the build workflow for multiple bases, content type processing, automatic chart category generation, and example folder processing with success indicators.

```bash
🚀 Starting dynamic registry build...

🎨 Processing base: new-york-v4
📦 Building new-york-v4/ui...
📦 Building new-york-v4/blocks...
📦 Building new-york-v4/charts...
   ✅ Chart categories auto-generated

🎨 Processing base: reka
📦 Building reka/ui...
⚠️  Skipping reka/blocks - path does not exist
📦 Building reka/examples...
   ✅ 60 example folders processed
📦 Building reka/lib...

✅ Registry build complete!
```

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

### Initialize project with create command

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/06.cli.md

Alias for the init command. Initializes configuration and dependencies for a new project.

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

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

### Install shadcn-vue Skeleton component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/skeleton.md

This command utilizes the shadcn-vue CLI to streamline the installation of the Skeleton component. It automatically adds the necessary files and configurations to your project, simplifying the setup process.

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

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

### Initialize an Existing Project with a Preset

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/SKILL.md

Initialize an existing project with a chosen UI preset. This command updates the project's configuration to match the selected preset.

```bash
npx shadcn-vue@latest init --preset nova
```

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

### Fetch component documentation

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/06.cli.md

Retrieve documentation, API references, and usage examples for specified components with optional JSON output.

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

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

### Initialize with Defaults

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/SKILL.md

A shortcut to initialize an existing project with default settings, often implying a specific template and base preset.

```bash
npx shadcn-vue@latest init --defaults
```

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

### Prepare Nuxt Project for Initialization

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/installation/02.nuxt.md

Before initializing a new project, run this command to generate the necessary `.nuxt` folder. This step is crucial for Nuxt to set up its internal structure.

```bash
npx nuxi prepare
```

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

### Install TypeScript as a dev dependency for Nuxt

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/installation/02.nuxt.md

If you encounter a 'Cannot read properties of undefined (reading 'sys')' error during Nuxt project setup, installing TypeScript as a development dependency can resolve the issue. This is a known workaround advised in Nuxt's GitHub discussions for specific environment configurations.

```bash
npm install -D typescript
```

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

### Display Project Information

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/cli.md

Use the 'info' command to display project details and the 'components.json' configuration. Run this command first to understand your project's setup, including framework, aliases, and Tailwind CSS configuration.

```bash
npx shadcn-vue@latest info [options]
```

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

### Date Picker Usage Example

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/date-picker.md

Demonstrates how to use the Date Picker component, integrating Popover and Calendar. It includes necessary imports and setup for date selection.

```vue
<script setup lang="ts">
import { DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
import { CalendarIcon } from '@lucide/vue'
import { ref } from 'vue'
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import { cn } from '@/lib/utils'

const date = ref<Date>()
const defaultPlaceholder = today(getLocalTimeZone())
</script>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button
        variant="outline"
        :class="cn(
          'w-[280px] justify-start text-left font-normal',
          !date && 'text-muted-foreground',
        )"
      >
        <CalendarIcon class="mr-2 h-4 w-4" />
        {{ date ? date.toDateString() : "Pick a date" }}
      </Button>
    </PopoverTrigger>
    <PopoverContent class="w-auto p-0">
      <Calendar
        v-model="date"
        :initial-focus="true"
        :default-placeholder="defaultPlaceholder"
        layout="month-and-year"
      />
    </PopoverContent>
  </Popover>
</template>
```

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

### Serve Registry Locally

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/registry/getting-started.md

Command to start the development server to serve the generated registry files at a local URL for testing.

```bash
npm run dev
```

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

### Initialize shadcn-vue in a Project

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/cli.md

Use the `init` command to set up shadcn-vue in an existing project or create a new one. It supports various templates and presets, with options to skip prompts, use defaults, force overwrites, and specify a working directory or project name.

```bash
npx shadcn-vue@latest init [components...] [options]
```

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

### Define alias for UI components

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/03.components-json.md

This alias specifies the import path for UI components, for example, `@/app/ui`. It allows customization of the installation directory for UI components generated by the CLI.

```json
{
  "aliases": {
    "ui": "@/app/ui"
  }
}
```

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

### POST /cli/init

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/10.changelog.md

Initialize a new shadcn-vue project or update an existing one with Reka UI support.

```APIDOC
## POST /cli/init

### Description
Initialize shadcn-vue in a project. This command detects the framework, updates existing Tailwind configuration files instead of overriding them, and sets up the project for Reka UI.

### Method
POST

### Endpoint
npx shadcn-vue@latest init [components...]

### Parameters
#### Path Parameters
- **components** (string) - Optional - Specific components to install during initialization (e.g., Sidebar01, Login01).

### Request Example
npx shadcn-vue@latest init Sidebar01 Login01

### Response
#### Success Response (200)
- **status** (string) - Success message indicating project initialization and file updates.
```

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

### Basic Toggle Group Usage in Vue

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/toggle-group.md

Example of a multiple-selection toggle group using Vue script setup and template syntax. It imports ToggleGroup and ToggleGroupItem from the local UI registry.

```vue
<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
</script>

<template>
  <ToggleGroup type="multiple">
    <ToggleGroupItem value="a">
      A
    </ToggleGroupItem>
    <ToggleGroupItem value="b">
      B
    </ToggleGroupItem>
    <ToggleGroupItem value="c">
      C
    </ToggleGroupItem>
  </ToggleGroup>
</template>
```

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

### Initialize Preset (Merge or Skip)

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/cli.md

Use this command to initialize or update components with a preset. Combined with `--no-reinstall`, it allows for merging styles or skipping component updates while modifying configuration and CSS variables. Further actions like smart merging or component updates may be required after initialization.

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

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

### Install Toggle Component via Shadcn-Vue CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/toggle.md

This command uses the Shadcn-Vue CLI to automatically add the Toggle component to your project. It handles fetching the component files and integrating them into your existing setup.

```bash
npx shadcn-vue@latest add toggle
```

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

### Install Collapsible Component via shadcn-vue CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/collapsible.md

Use this command to quickly add the Collapsible component and its dependencies to your shadcn-vue project using the command-line interface. This method automates the setup process.

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

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

### View command options and usage

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/06.cli.md

Full usage reference for the view command including options for working directory and help.

```bash
Usage: shadcn-vue view [options] <items...>

view items from the registry

Arguments:
  items            the item names or URLs to view

Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -h, --help       display help for command
```

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

### Apply command options and usage

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/06.cli.md

Full usage reference for the apply command including options for preset selection, confirmation, and working directory.

```bash
Usage: shadcn-vue apply [options] [preset]

apply a preset to an existing project

Arguments:
  preset             the preset to apply

Options:
  --preset <preset>  preset configuration to apply
  -y, --yes          skip confirmation prompt. (default: false)
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -s, --silent       mute output. (default: false)
  -h, --help         display help for command
```

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

### Import and Use RangeCalendar Component

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/range-calendar.md

Vue 3 script setup example demonstrating how to import and render the RangeCalendar component. The component is imported from the UI components directory and rendered as a self-closing tag in the template.

```vue
<script setup lang="ts">
import { RangeCalendar } from "@/components/ui/range-calendar";
</script>

<template>
  <RangeCalendar />
</template>
```

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

### Install Dialog component using shadcn-vue CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/dialog.md

This command uses the shadcn-vue command-line interface to automatically add the Dialog component and its dependencies to your project. It simplifies the setup process by handling file creation and configuration.

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

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

### Build command options

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/06.cli.md

Complete list of available options for the build command including output directory and working directory settings.

```bash
Usage: shadcn-vue build [options] [registry]

build components for a shadcn-vue 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.
  -h, --help           display help for command
```

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

### Install Dropdown Menu component using shadcn-vue CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/dropdown-menu.md

This command utilizes the shadcn-vue CLI to automatically add the Dropdown Menu component and its required dependencies to your project. It streamlines the setup process by handling file creation and configuration.

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

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

### Basic usage of Shadcn Vue Input component in Vue

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/input.md

This example demonstrates how to import the Input component from your project's UI library and render it within a Vue template. It showcases the minimal setup required to display an input field.

```vue
<script setup lang="ts">
import { Input } from '@/components/ui/input'
</script>

<template>
  <Input />
</template>
```

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

### Basic usage of Skeleton component in Vue

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/skeleton.md

This example demonstrates how to import the Skeleton component into a Vue setup script and render it within a template. It shows how to apply Tailwind CSS classes to control the placeholder's dimensions and appearance, such as width, height, and rounded corners.

```vue
<script setup lang="ts">
import { Skeleton } from '@/components/ui/skeleton'
</script>

<template>
  <Skeleton class="w-[100px] h-[20px] rounded-full" />
</template>
```

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

### Complete registry.json Schema Example

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/registry/registry-json.md

A complete example of a registry.json file showing all major properties including schema reference, registry metadata, and component items array. This demonstrates the full structure needed to define a custom component registry.

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

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

### Install Popover Component

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/popover.md

Installation commands for adding the Popover component to a project via the shadcn-vue CLI or by manually installing the reka-ui dependency.

```bash
npx shadcn-vue@latest add popover
```

```bash
npm install reka-ui
```

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

### Usage Example of Command Component

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/command.md

Demonstrates how to use the Command component with input, lists, groups, and shortcuts. Ensure all necessary sub-components are imported.

```vue
<script setup lang="ts">
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@/components/ui/command'
</script>

<template>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>Calendar</CommandItem>
        <CommandItem>Search Emoji</CommandItem>
        <CommandItem>Calculator</CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Settings">
        <CommandItem>Profile</CommandItem>
        <CommandItem>Billing</CommandItem>
        <CommandItem>Settings</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>
```

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

### shadcn_vue:get_item_examples_from_registries

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/mcp.md

Find usage examples and demos with source code.

```APIDOC
## shadcn_vue:get_item_examples_from_registries

### Description
Finds usage examples and demos, including their source code, from specified registries.

### Parameters
#### Input
- **registries** (string[]) - Required - A list of registry names to search within.
- **query** (string) - Required - The query string to find examples (e.g., `"accordion-demo"`, `"button example"`).
```

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

### Install Stepper Component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/stepper.md

Quick installation of the Stepper component using the shadcn-vue CLI tool. This command downloads and installs the component with all dependencies configured.

```bash
npx shadcn-vue@latest add stepper
```

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

### Install Checkbox Component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/checkbox.md

Installs the Checkbox component using the shadcn-vue CLI tool. This is the quickest installation method that automatically adds the component to your project.

```bash
npx shadcn-vue@latest add checkbox
```

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

### Install Avatar Component via CLI

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/avatar.md

Installs the Avatar component using the shadcn-vue CLI tool. This is the quickest installation method that automatically sets up the component in your project.

```bash
npx shadcn-vue@latest add avatar
```

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

### Example Output for shadcn-vue docs

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/cli.md

Illustrates the expected output format when fetching documentation URLs for multiple components.

```text
input
  docs      https://shadcn-vue.com/docs/components/input
  examples  https://raw.githubusercontent.com/.../examples/InputExample.vue

button
  docs      https://shadcn-vue.com/docs/components/button
  examples  https://raw.githubusercontent.com/.../examples/ButtonExample.vue
```

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

### Basic Menubar Implementation in Vue

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/menubar.md

Demonstrates how to structure a Menubar with a File menu, including triggers, content items, shortcuts, and separators using Vue script setup.

```vue
<script setup lang="ts">
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from '@/components/ui/menubar'
</script>

<template>
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New Window</MenubarItem>
        <MenubarSeparator />
        <MenubarItem>Share</MenubarItem>
        <MenubarSeparator />
        <MenubarItem>Print</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>
```

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

### Install Embla Carousel Manually

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/carousel.md

This command installs the core Embla Carousel Vue package, which is a dependency for the Shadcn-Vue Carousel component. This step is part of the manual installation process.

```bash
npm install embla-carousel-vue
```

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

### Initialize Base Directory Structure

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/scripts/QUICKSTART.md

Commands to create the necessary folder hierarchy for a new registry base, including UI, blocks, examples, and lib directories.

```bash
# Navigate to the registry directory
cd registry/bases

# Create your new base
mkdir my-base
cd my-base

# Create content type directories
mkdir -p ui blocks examples lib components
```

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

### Install Breadcrumb Component

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/breadcrumb.md

Install the breadcrumb component using the shadcn-vue CLI.

```bash
npx shadcn-vue@latest add breadcrumb
```

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

### Add Components to Project

Source: https://github.com/unovue/shadcn-vue/blob/dev/skills/shadcn-vue/SKILL.md

Add specific components or all available components to your project. This command fetches and integrates the necessary files for the selected components.

```bash
npx shadcn-vue@latest add button card dialog
```

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

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

### Basic Tooltip Setup

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/chart.md

Set up a basic tooltip structure using `ChartTooltip` and `ChartCrosshair` with a tooltip template.

```vue
<template>
  <ChartTooltip />
  <ChartCrosshair
    :template="componentToString(chartConfig, ChartTooltipContent)"
  />
</template>
```

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

### Install vue-input-otp dependency manually with npm

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/input-otp.md

This snippet shows how to install the core 'vue-input-otp' package using npm. This is the initial step for manual installation, providing the underlying functionality for the Input OTP component.

```bash
npm install vue-input-otp
```

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

### Basic Chart Setup with Unovis

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/chart.md

This snippet demonstrates the fundamental structure for setting up a chart using Unovis components within a Vue application. It includes importing necessary components and defining the chart's data and configuration.

```vue
<script setup lang="ts">
import { VisGroupedBar, VisXYContainer } from '@unovis/vue'
import { ChartContainer, ChartTooltipContent } from '@/components/ui/chart'
</script>

<template>
  <ChartContainer :config="chartConfig">
    <VisXYContainer :data="data">
      <VisGroupedBar :x="(d) => d.month" :y="(d) => d.value" />
      <ChartTooltip :template="componentToString(chartConfig, ChartTooltipContent)" />
    </VisXYContainer>
  </ChartContainer>
</template>
```

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

### Install tanstack/vue-table Dependency

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/data-table.md

Install the tanstack/vue-table package, which is a required dependency for the shadcn-vue table component.

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

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

### Install Chart Component Dependencies

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/chart.md

Manually install the required Unovis dependencies for the chart component.

```bash
npm install @unovis/ts @unovis/vue
```

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

### Install Reka UI dependency

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/content/docs/components/tags-input.md

Install the Reka UI package, which is a dependency for the Tags Input component.

```bash
npm install reka-ui
```

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

### Registry Component Import Example

Source: https://github.com/unovue/shadcn-vue/blob/dev/apps/v4/components/demo/CREATED_COMPONENTS.md

Illustrates importing components directly from the registry path.

```typescript
import { Button } from '@/registry/new-york-v4/ui/button'
import { Alert, AlertDescription, AlertTitle } from '@/registry/new-york-v4/ui/alert'
// etc.
```