Shadcn Vue

https://shadcn-vue.com/docs/
Admin
Shadcn Vue is a collection of re-usable UI components for Vue.js applications, offering a...
Tokens:348,818
Snippets:2,514
Trust Score:8.8
Update:1 day ago
Show doc for...
Tokens:
Raw
### Install registry item using CLI

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

Use the `add` command with the URL of the registry item. The example installs `hello-world` from a local server.

```bash
pnpm dlx shadcn-vue@latest add http://localhost:3000/r/hello-world.json
```

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

### Install packages and run dev server (bash)

Source: https://shadcn-vue.com/docs/components/code-block

Commands to install the required packages and start the development server. The output is displayed in a code block with RTL direction.

```bash
pnpm add ai @ai-sdk/vue zodpnpm dev
```

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

### docs example in registry-item.json

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

Shows custom documentation or message displayed when installing the registry item via the CLI.

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

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

### Example prompt output from init

Source: https://shadcn-vue.com/docs/installation/vite

Example of a prompt shown during the init command, asking for the base color.

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

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

### Install @vueuse/core dependency

Source: https://shadcn-vue.com/docs/dark-mode/astro

Install the @vueuse/core package, which provides the useColorMode composable used for the mode toggle.

```bash
pnpm add @vueuse/core
```

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

### items property example

Source: https://shadcn-vue.com/docs/registry/registry-json

Example showing the items array in registry.json. Each item must implement the registry-item schema specification.

```json
{
  "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 shadcn-vue CLI

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

Install the shadcn-vue CLI. The build command is currently only available in the shadcn-vue@canary version.

```bash
pnpm add shadcn-vue@latest
```

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

### Install Textarea component with pnpm dlx

Source: https://shadcn-vue.com/docs/components/textarea

Installs the Textarea component using the shadcn-vue CLI. Run this command in your project directory.

```bash
pnpm dlx shadcn-vue@latest add textarea
```

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

### Install Dialog component with npx shadcn-vue@latest add dialog

Source: https://shadcn-vue.com/docs/ai-elements/message

Command to install the Dialog component, required for the settings dialog example. Run in the terminal.

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

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

### Usage example for Questionnaire component

Source: https://shadcn-vue.com/docs/components/questionnaire

A Vue 3 script setup example showing how to use the Questionnaire component with its subcomponents. It defines items for direction and timing, and handles form submission by logging the answers.

```vue
<script setup lang="ts">
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

const items = [
  { name: 'direction', required: true },
  { name: 'timing', required: true },
]

function handleSubmit(event: Event) {
  event.preventDefault()

  const answers = new FormData(event.target as HTMLFormElement)
  console.log(Object.fromEntries(answers))
}
</script>

<template>
  <Questionnaire :items="items" @submit="handleSubmit">
    <QuestionnaireProgress />

    <QuestionnaireItem name="direction" required>
      <QuestionnaireTitle>What should the agent build next?</QuestionnaireTitle>
      <QuestionnaireDescription>Choose a direction.</QuestionnaireDescription>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="tool-calls">Tool call timeline</QuestionnaireChoice>
        <QuestionnaireChoice value="approvals">Approval checkpoints</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireItem name="timing" required>
      <QuestionnaireTitle>When should work begin?</QuestionnaireTitle>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="now">Start now</QuestionnaireChoice>
        <QuestionnaireChoice value="backlog">Add it to the backlog</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireActions>
      <QuestionnairePrevious />
      <QuestionnaireSkip />
      <QuestionnaireNext />
      <QuestionnaireSubmit />
    </QuestionnaireActions>
  </Questionnaire>
</template>
```

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

### Initialize project with shadcn-vue CLI

Source: https://shadcn-vue.com/docs/cli

Run the init command to install dependencies, add the cn util, and configure CSS variables for a new project. The command is available via pnpm, npm, yarn, or bun.

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

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

### Install @tanstack/vue-table dependency

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

Adds the TanStack Vue Table dependency. This guide uses TanStack Table v9.

```bash
pnpm add @tanstack/vue-table
```

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

### Install registry item from GitHub

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

Install directly from a public GitHub repository that has a `registry.json` at its root. The CLI resolves the default branch and fetches files from the same commit.

```bash
pnpm dlx shadcn-vue@latest add owner/repo/hello-world
```

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

### Bubble align start and end example

Source: https://shadcn-vue.com/docs/components/bubble

Shows how to use the align prop on Bubble to align to start (default) or end. The first bubble uses default start alignment, the second uses align="end" for user messages. Note: set align on Message component for chat interfaces.

```Vue
<script setup lang="ts">
import { Bubble, BubbleContent } from '@/components/ui/bubble'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-8 py-12">
    <Bubble variant="muted">
      <BubbleContent>
        This bubble is aligned to the start. This is the default alignment.
      </BubbleContent>
    </Bubble>
    <Bubble align="end">
      <BubbleContent>
        This bubble is aligned to the end. Use this for user messages.
      </BubbleContent>
    </Bubble>
  </div>
</template>
```

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

### build command help output

Source: https://shadcn-vue.com/docs/cli

Shows the usage and options for the build command. The registry argument defaults to './registry.json', and the output directory defaults to './public/r'.

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

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

### Installation via CLI

Source: https://shadcn-vue.com/docs/components/select

Command to add the Select component using the shadcn-vue CLI. Run this in your project directory.

```bash
pnpm dlx shadcn-vue@latest add select
```

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

### Responsive Breadcrumb with Dropdown and Drawer (Vue SFC)

Source: https://shadcn-vue.com/docs/components/breadcrumb

A responsive breadcrumb example that shows a dropdown menu on desktop (min-width: 768px) and a drawer on mobile. It uses NuxtLink, @vueuse/core's useMediaQuery, and shadcn-vue components. The example includes a script setup block and a template block.

```Vue
<script setup lang="ts">
import { NuxtLink } from '#components'
import { useMediaQuery } from '@vueuse/core'
import { ref } from 'vue'
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { Button } from '@/components/ui/button'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

const items = [
  { href: '#', label: 'Home' },
  { href: '#', label: 'Documentation' },
  { href: '#', label: 'Building Your Application' },
  { href: '#', label: 'Data Fetching' },
  { label: 'Caching and Revalidating' },
]

const ITEMS_TO_DISPLAY = 3

const open = ref(false)
const isDesktop = useMediaQuery('(min-width: 768px)')
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink as-child>
          <NuxtLink :to="items[0]?.href || '/'">
            {{ items[0]?.label }}
          </NuxtLink>
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <template v-if="items.length > ITEMS_TO_DISPLAY">
        <BreadcrumbItem>
          <template v-if="isDesktop">
            <DropdownMenu v-model:open="open">
              <DropdownMenuTrigger
                class="flex items-center gap-1"
                aria-label="Toggle menu"
              >
                <BreadcrumbEllipsis class="size-4" />
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start">
                <DropdownMenuItem
                  v-for="(item, index) in items.slice(1, -2)"
                  :key="index"
                >
                  <NuxtLink :to="item.href || '#'">
                    {{ item.label }}
                  </NuxtLink>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </template>
          <template v-else>
            <Drawer v-model:open="open">
              <DrawerTrigger aria-label="Toggle Menu">
                <BreadcrumbEllipsis class="h-4 w-4" />
              </DrawerTrigger>
              <DrawerContent>
                <DrawerHeader class="text-left">
                  <DrawerTitle>Navigate to</DrawerTitle>
                  <DrawerDescription>
                    Select a page to navigate to.
                  </DrawerDescription>
                </DrawerHeader>
                <div class="grid gap-1 px-4">
                  <NuxtLink
                    v-for="(item, index) in items.slice(1, -2)"
                    :key="index"
                    :to="item.href || '#'"
                    class="py-1 text-sm"
                  >
                    {{ item.label }}
                  </NuxtLink>
                </div>
                <DrawerFooter class="pt-4">
                  <DrawerClose as-child>
                    <Button variant="outline">
                      Close
                    </Button>
                  </DrawerClose>
                </DrawerFooter>
              </DrawerContent>
            </Drawer>
          </template>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
      </template>
      <BreadcrumbItem
        v-for="(item, index) in items.slice(-ITEMS_TO_DISPLAY + 1)"
        :key="index"
      >
        <template v-if="item.href">
          <BreadcrumbLink
            as-child
            class="max-w-20 truncate md:max-w-none"
          >
            <NuxtLink :to="item.href">
              {{ item.label }}
            </NuxtLink>
          </BreadcrumbLink>
          <BreadcrumbSeparator />
        </template>
        <template v-else>
          <BreadcrumbPage class="max-w-20 truncate md:max-w-none">
            {{ item.label }}
          </BreadcrumbPage>
        </template>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>
```

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

### Install block with overridden primitives (example-style.json)

Source: https://shadcn-vue.com/docs/registry/examples

Defines a registry:block item that installs the Login01 block and overrides the button, input, and label primitives with ones from a remote registry. The registryDependencies include the block and remote URLs.

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

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

### NativeSelect with Groups (Vue Template)

Source: https://shadcn-vue.com/docs/components/native-select

Alternative example of grouping options with NativeSelectOptGroup, using food categories. This template-only version omits the script setup block.

```vue
<template>
  <NativeSelect>
    <NativeSelectOption value="">
      Select a food
    </NativeSelectOption>
    <NativeSelectOptGroup label="Fruits">
      <NativeSelectOption value="apple">
        Apple
      </NativeSelectOption>
      <NativeSelectOption value="banana">
        Banana
      </NativeSelectOption>
      <NativeSelectOption value="blueberry">
        Blueberry
      </NativeSelectOption>
    </NativeSelectOptGroup>
    <NativeSelectOptGroup label="Vegetables">
      <NativeSelectOption value="carrot">
        Carrot
      </NativeSelectOption>
      <NativeSelectOption value="broccoli">
        Broccoli
      </NativeSelectOption>
      <NativeSelectOption value="spinach">
        Spinach
      </NativeSelectOption>
    </NativeSelectOptGroup>
  </NativeSelect>
</template>
```

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

### shadcn-vue init command options

Source: https://shadcn-vue.com/docs/cli

Displays the full usage and options for the shadcn-vue init command, including presets, templates, base, style, icon library, font, base color, and various flags.

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

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

### Create a custom trigger with useSidebar

Source: https://shadcn-vue.com/docs/components/sidebar

Use the useSidebar hook to get the toggleSidebar function and bind it to a Button click event. The script setup uses TypeScript.

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

const { toggleSidebar } = useSidebar()
</script>

<template>
  <Button @click="toggleSidebar">
    Toggle Sidebar
  </Button>
</template>
```

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

### Basic Dropdown Menu Usage

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

A minimal example of the DropdownMenu component with a trigger, content, label, separator, and menu items. This is the recommended starting point for using the component.

```Vue
<script setup lang="ts">
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger>Open</DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>
```

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

### Run docs command with pnpm

Source: https://shadcn-vue.com/docs/cli

Fetches documentation and API references for a component. Replace [component] with the component name.

```bash
pnpm dlx shadcn-vue@latest docs [component]
```

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

### NativeSelect Invalid State (Vue Template)

Source: https://shadcn-vue.com/docs/components/native-select

Alternative example of the invalid state using 'aria-invalid' with a country selection. This template-only version omits the script setup block.

```vue
<template>
  <NativeSelect aria-invalid="true">
    <NativeSelectOption value="">
      Select a country
    </NativeSelectOption>
    <NativeSelectOption value="us">
      United States
    </NativeSelectOption>
    <NativeSelectOption value="uk">
      United Kingdom
    </NativeSelectOption>
    <NativeSelectOption value="ca">
      Canada
    </NativeSelectOption>
  </NativeSelect>
</template>
```

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

### Install File Tree with CLI

Source: https://shadcn-vue.com/docs/ai-elements/file-tree

Run this command to add the required collapsible and button components via shadcn-vue CLI.

```bash
pnpm dlx shadcn-vue@latest add collapsible button
```

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

### Menubar component example with File, Edit, View, and Profiles menus

Source: https://shadcn-vue.com/docs/components/menubar

A complete Vue 3 script setup component using the Menubar primitives from '@/components/ui/menubar'. It demonstrates menu items with keyboard shortcuts, disabled items, submenus, checkbox items, and a radio group for profiles. The example is the default usage shown on the page.

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

<template>
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>
          New Window <MenubarShortcut>⌘N</MenubarShortcut>
        </MenubarItem>
        <MenubarItem disabled>
          New Incognito Window
        </MenubarItem>
        <MenubarSeparator />
        <MenubarSub>
          <MenubarSubTrigger>Share</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarItem>Email link</MenubarItem>
            <MenubarItem>Messages</MenubarItem>
            <MenubarItem>Notes</MenubarItem>
          </MenubarSubContent>
        </MenubarSub>
        <MenubarSeparator />
        <MenubarItem>
          Print... <MenubarShortcut>⌘P</MenubarShortcut>
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>Edit</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>
          Undo <MenubarShortcut>⌘Z</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>
          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
        </MenubarItem>
        <MenubarSeparator />
        <MenubarSub>
          <MenubarSubTrigger>Find</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarItem>Search the web</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>Find...</MenubarItem>
            <MenubarItem>Find Next</MenubarItem>
            <MenubarItem>Find Previous</MenubarItem>
          </MenubarSubContent>
        </MenubarSub>
        <MenubarSeparator />
        <MenubarItem>Cut</MenubarItem>
        <MenubarItem>Copy</MenubarItem>
        <MenubarItem>Paste</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>View</MenubarTrigger>
      <MenubarContent>
        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
        <MenubarCheckboxItem :model-value="true">
          Always Show Full URLs
        </MenubarCheckboxItem>
        <MenubarSeparator />
        <MenubarItem inset>
          Reload <MenubarShortcut>⌘R</MenubarShortcut>
        </MenubarItem>
        <MenubarItem disabled inset>
          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem inset>
          Toggle Fullscreen
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem inset>
          Hide Sidebar
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>Profiles</MenubarTrigger>
      <MenubarContent>
        <MenubarRadioGroup model-value="benoit">
          <MenubarRadioItem value="andy">
            Andy
          </MenubarRadioItem>
          <MenubarRadioItem value="benoit">
            Benoit
          </MenubarRadioItem>
          <MenubarRadioItem value="Luis">
            Luis
          </MenubarRadioItem>
        </MenubarRadioGroup>
        <MenubarSeparator />
        <MenubarItem inset>
          Edit...
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem inset>
          Add Profile...
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</template>
```

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

### Create a new Astro project with Vue and Tailwind CSS

Source: https://shadcn-vue.com/docs/installation/astro

Run this command to create a new Astro project with the with-tailwindcss template, install dependencies, add Vue, and initialize a git repository.

```bash
pnpm createastro@latest astro-app  --template with-tailwindcss --install --add vue --git
```

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

### Full grouped bar chart with tooltip and crosshair

Source: https://shadcn-vue.com/docs/components/chart

Complete example of a grouped bar chart using @unovis/vue and shadcn-vue chart components. Includes chart data, config, and tooltip/crosshair setup.

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

const chartData = [
  { date: new Date('2024-01-01'), desktop: 186, mobile: 80 },
  { date: new Date('2024-02-01'), desktop: 305, mobile: 200 },
  { date: new Date('2024-03-01'), desktop: 237, mobile: 120 },
  { date: new Date('2024-04-01'), desktop: 73, mobile: 190 },
  { date: new Date('2024-05-01'), desktop: 209, mobile: 130 },
  { date: new Date('2024-06-01'), desktop: 214, mobile: 140 },
]

type Data = typeof chartData[number]

const chartConfig = {
  desktop: {
    label: 'Desktop',
    color: '#2563eb',
  },
  mobile: {
    label: 'Mobile',
    color: '#60a5fa',
  },
} satisfies ChartConfig
</script>

<template>
  <ChartContainer :config="chartConfig" class="min-h-[200px] w-full">
    <VisXYContainer :data="chartData">
      <VisGroupedBar
        :x="(d: Data) => d.date"
        :y="[(d: Data) => d.desktop, (d: Data) => d.mobile]"
        :color="[chartConfig.desktop.color, chartConfig.mobile.color]"
        :rounded-corners="4"
        bar-padding="0.1"
        group-padding="0"
      />
      <VisAxis
        type="x"
        :x="(d: Data) => d.date"
        :tick-line="false"
        :domain-line="false"
        :grid-line="false"
        :tick-format="(d: number) => {
          const date = new Date(d)
          return date.toLocaleDateString('en-US', {
            month: 'short',
          })
        }"
        :tick-values="chartData.map(d => d.date)"
      />
      <VisAxis
        type="y"
        :tick-format="(d: number) => ''"
        :tick-line="false"
        :domain-line="false"
        :grid-line="true"
      />
      <ChartTooltip />
      <ChartCrosshair
        :template="componentToString(chartConfig, ChartTooltipContent, {
          labelFormatter(d) {
            return new Date(d).toLocaleDateString('en-US', {
              month: 'long',
            })
          },
        })"
        :color="[chartConfig.desktop.color, chartConfig.mobile.color]"
      />
    </VisXYContainer>
  </ChartContainer>
</template>
```

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

### Install Confirmation with CLI

Source: https://shadcn-vue.com/docs/ai-elements/confirmation

Install the required item and button components using the shadcn-vue CLI. The command is `pnpm dlx shadcn-vue@latest add item button`.

```bash
pnpm dlx shadcn-vue@latest add item button
```

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

### Vue usage example for Trace component

Source: https://shadcn-vue.com/docs/ai-elements/sources

A Vue 3 script setup component that renders a collapsible trace list of sources. It imports Trace components and Lucide icons, and uses a getHostname helper to display source hostnames.

```vue
<script setup lang="ts">
import { ArrowUpRightIcon, GlobeIcon } from '@lucide/vue'
import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from '@/components/ui/trace'

function getHostname(url: string) {
  return new URL(url).hostname
}
</script>

<template>
  <Trace>
    <TraceCollapsible>
      <TraceCollapsibleTrigger>
        <TraceLine>
          <TraceIcon>
            <GlobeIcon />
          </TraceIcon>
          <TraceTitle>Used {{ sources.length }} sources</TraceTitle>
        </TraceLine>
      </TraceCollapsibleTrigger>
      <TraceCollapsibleContent>
        <Trace>
          <a
            v-for="source in sources"
            :key="source.url"
            :href="source.url"
            target="_blank"
            rel="noreferrer"
          >
            <TraceLine>
              <TraceIcon>
                <GlobeIcon />
              </TraceIcon>
              <TraceTitle>
                {{ source.title ?? getHostname(source.url) }}
                <span class="sr-only"> (opens in a new tab)</span>
              </TraceTitle>
              <TraceIcon>
                <ArrowUpRightIcon />
              </TraceIcon>
            </TraceLine>
          </a>
        </Trace>
      </TraceCollapsibleContent>
    </TraceCollapsible>
  </Trace>
</template>
```

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

### Install Context component with shadcn-vue CLI

Source: https://shadcn-vue.com/docs/ai-elements/context

Run this command to add the hover-card and progress components, which Context is built with. Use pnpm, npm, or yarn as shown.

```bash
pnpm dlx shadcn-vue@latest add hover-card progress
```

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

### Install using a namespace with pnpm

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

Use the shadcn-vue CLI to add an item from a registered namespace. The command resolves @acme/hello-world against the URL template defined in components.json.

```bash
pnpm dlx shadcn-vue@latest add @acme/hello-world
```

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

### Complex component registry item JSON

Source: https://shadcn-vue.com/docs/registry/faq

Example registry item that installs a page, two components, a composable, a format date utils, and a config file. The files array specifies each file's path, type, and optional target.

```json
{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "A complex hello world component",
  "files": [
    {
      "path": "registry/new-york/HelloWorld/page.vue",
      "type": "registry:page",
      "target": "pages/hello/index.vue"
    },
    {
      "path": "registry/new-york/HelloWorld/components/HelloWorld.vue",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/HelloWorld/components/FormattedMessage.vue",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/HelloWorld/composables/useHello.ts",
      "type": "registry:hook"
    },
    {
      "path": "registry/new-york/HelloWorld/lib/formatDate.ts",
      "type": "registry:utils"
    },
    {
      "path": "registry/new-york/HelloWorld/hello.config.ts",
      "type": "registry:file",
      "target": "~/hello.config.ts"
    }
  ]
}
```

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

### Serve the registry with Nuxt

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

Run the Nuxt server to serve your registry locally. Files are served at http://localhost:3000/r/[NAME].json.

```bash
pnpm dev
```

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

### Range Calendar with Date Range and Two Months

Source: https://shadcn-vue.com/docs/components/range-calendar

This example shows how to bind a date range using v-model, display two months, and disable days outside the current view. It uses the @internationalized/date package to calculate the start and end dates.

```vue
<script setup lang="ts">
import type { DateRange } from 'reka-ui'
import { getLocalTimeZone, today } from '@internationalized/date'
import { RangeCalendar } from '@/components/ui/range-calendar'

const start = today(getLocalTimeZone())
const end = start.add({ days: 7 })

const dateRange = ref({
  start,
  end,
}) as Ref<DateRange>
</script>

<template>
  <RangeCalendar
    v-model="dateRange"
    class="rounded-md border shadow-sm"
    :number-of-months="2"
    disable-days-outside-current-view
  />
</template>
```

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

### Subscription Plan Form with VeeValidate and Zod (Full Example)

Source: https://shadcn-vue.com/docs/forms/vee-validate

Complete Vue component with script setup and template for a subscription plan radio group. Uses toTypedSchema from @vee-validate/zod, useForm from vee-validate, and shadcn-vue Field components. The form validates that a plan is selected and shows a toast with the submitted values.

```vue
<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'
import { useForm, Field as VeeField } from 'vee-validate'
import { toast } from 'vue-sonner'
import { z } from 'zod'

import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
  FieldTitle,
} from '@/components/ui/field'
import {
  RadioGroup,
  RadioGroupItem,
} from '@/components/ui/radio-group'

const plans = [
  {
    id: 'starter',
    title: 'Starter (100K tokens/month)',
    description: 'For everyday use with basic features.',
  },
  {
    id: 'pro',
    title: 'Pro (1M tokens/month)',
    description: 'For advanced AI usage with more features.',
  },
  {
    id: 'enterprise',
    title: 'Enterprise (Unlimited tokens)',
    description: 'For large teams and heavy usage.',
  },
] as const

const formSchema = toTypedSchema(
  z.object({
    plan: z.string().min(1, 'You must select a subscription plan to continue.'),
  }),
)

const { handleSubmit, resetForm } = useForm({
  validationSchema: formSchema,
  initialValues: {
    plan: '',
  },
})

const onSubmit = handleSubmit((data) => {
  toast('You submitted the following values:', {
    description: h('pre', { class: 'bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4' }, h('code', JSON.stringify(data, null, 2))),
    position: 'bottom-right',
    class: 'flex flex-col gap-2',
    style: {
      '--border-radius': 'calc(var(--radius)  + 4px)',
    },
  })
})
</script>

<template>
  <Card class="w-full sm:max-w-md">
    <CardHeader>
      <CardTitle>Subscription Plan</CardTitle>
      <CardDescription>
        See pricing and features for each plan.
      </CardDescription>
    </CardHeader>
    <CardContent>
      <form id="form-vee-radiogroup" @submit="onSubmit">
        <FieldGroup>
          <VeeField v-slot="{ componentField, errors }" name="plan">
            <FieldSet :data-invalid="!!errors.length">
              <FieldLegend>Plan</FieldLegend>
              <FieldDescription>
                You can upgrade or downgrade your plan at any time.
              </FieldDescription>
              <RadioGroup
                v-bind="componentField"
                :aria-invalid="!!errors.length"
              >
                <FieldLabel
                  v-for="plan in plans"
                  :key="plan.id"
                  :for="`form-vee-radiogroup-${plan.id}`"
                >
                  <Field
                    orientation="horizontal"
                    :data-invalid="!!errors.length"
                  >
                    <FieldContent>
                      <FieldTitle>{{ plan.title }}</FieldTitle>
                      <FieldDescription>
                        {{ plan.description }}
                      </FieldDescription>
                    </FieldContent>
                    <RadioGroupItem
                      :id="`form-vee-radiogroup-${plan.id}`"
                      :value="plan.id"
                      :aria-invalid="!!errors.length"
                    />
                  </Field>
                </FieldLabel>
              </RadioGroup>
              <FieldError v-if="errors.length" :errors="errors" />
            </FieldSet>
          </VeeField>
        </FieldGroup>
      </form>
    </CardContent>
    <CardFooter>
      <Field orientation="horizontal">
        <Button type="button" variant="outline" @click="resetForm">
          Reset
        </Button>
        <Button type="submit" form="form-vee-radiogroup">
          Save
        </Button>
      </Field>
    </CardFooter>
  </Card>
</template>
```

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

### Create Laravel project with Vue

Source: https://shadcn-vue.com/docs/installation/laravel

Use the Laravel installer to create a new project with Inertia and Vue support.

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

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

### Create project with shadcn-vue CLI

Source: https://shadcn-vue.com/docs/cli

The create command is an alias for init, providing the same functionality.

```bash
pnpm dlx shadcn-vue@latest create
```

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

### Message component example with user and agent turns

Source: https://shadcn-vue.com/docs/ai-elements/message

Vue component showing a Message turn: user message as a Bubble with align="end" and agent reply as markdown with action buttons (copy, edit, feedback, retry). Uses createReusableTemplate for actions and useClipboard for copy. The reply contains the install command and instructions for the dialog.

```vue
<script setup lang="ts">
import {
  CheckIcon,
  CopyIcon,
  PencilIcon,
  RefreshCcwIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
} from '@lucide/vue'
import { createReusableTemplate, useClipboard } from '@vueuse/core'
import { ref } from 'vue'
import Markdown from '@/components/Markdown.vue'
import { Bubble, BubbleContent } from '@/components/ui/bubble'
import { Button } from '@/components/ui/button'
import {
  Message,
  MessageContent,
  MessageFooter,
} from '@/components/ui/message'
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/tooltip'

const reply = `Install Dialog, then open it from the gear button in \`SiteHeader.vue\`.

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

Wrap the button in a \`DialogTrigger\` and put the settings form in \`DialogContent\`. Focus moves into the dialog when it opens, and **Esc** closes it.`

const { copy, copied } = useClipboard({ copiedDuring: 2000, legacy: true })
const feedback = ref<'like' | 'dislike' | null>(null)

const [DefineMessageAction, MessageAction] = createReusableTemplate<{
  label: string
  pressed?: boolean
  onClick?: () => void
}>()
</script>

<template>
  <DefineMessageAction v-slot="{ label, pressed, onClick, $slots }">
    <Tooltip>
      <TooltipTrigger as-child>
        <Button
          variant="ghost"
          size="icon-sm"
          :aria-label="label"
          :aria-pressed="pressed"
          @click="onClick?.()"
        >
          <component :is="$slots.default" />
        </Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>{{ label }}</p>
      </TooltipContent>
    </Tooltip>
  </DefineMessageAction>

  <div class="mx-auto flex w-full max-w-md flex-col gap-8 py-6 text-sm">
    <Message align="end">
      <MessageContent class="gap-2">
        <Bubble align="end" variant="muted">
          <BubbleContent>
            How do I add a settings dialog? It should open from the gear icon
            in the header.
          </BubbleContent>
        </Bubble>
        <MessageFooter>
          <MessageAction label="Copy">
            <CopyIcon />
          </MessageAction>
          <MessageAction label="Edit">
            <PencilIcon />
          </MessageAction>
        </MessageFooter>
      </MessageContent>
    </Message>
    <Message>
      <MessageContent class="gap-2">
        <Markdown :value="reply" />
        <MessageFooter class="px-0">
          <MessageAction
            :label="copied ? 'Copied' : 'Copy'"
            @click="copy(reply)"
          >
            <CheckIcon v-if="copied" />
            <CopyIcon v-else />
          </MessageAction>
          <MessageAction
            label="Good response"
            :pressed="feedback === 'like'"
            @click="feedback = feedback === 'like' ? null : 'like'"
          >
            <ThumbsUpIcon :class="feedback === 'like' ? 'fill-current' : undefined" />
          </MessageAction>
          <MessageAction
            label="Bad response"
            :pressed="feedback === 'dislike'"
            @click="feedback = feedback === 'dislike' ? null : 'dislike'"
          >
            <ThumbsDownIcon :class="feedback === 'dislike' ? 'fill-current' : undefined" />
          </MessageAction>
          <MessageAction label="Retry">
            <RefreshCcwIcon />
          </MessageAction>
        </MessageFooter>
      </MessageContent>
    </Message>
  </div>
</template>
```

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

### Install shadcn-vue skill with pnpm

Source: https://shadcn-vue.com/docs/skills

Installs the shadcn-vue skill into your project using pnpm. Once installed, your AI assistant automatically loads it when working with shadcn-vue components.

```bash
pnpm dlx skills add unovue/shadcn-vue
```

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

### shadcn-vue init

Source: https://shadcn-vue.com/docs/cli

Initializes configuration and dependencies for a new project. Installs dependencies, adds the cn util, and configures CSS variables.

```APIDOC
## [CLI] shadcn-vue init

### Description
Use the `init` command to initialize configuration and dependencies for a new project. The `init` command installs dependencies, adds the `cn` util and configures CSS variables for the project.

### Usage
```bash
pnpm dlx shadcn-vue@latest init
```

### Arguments
- **components** (string) - Optional - names, url or local path to component

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

### Alias
The `create` command is an alias for `init`:
```bash
pnpm dlx shadcn-vue@latest create
```
```

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

### Install embla-carousel-autoplay plugin

Source: https://shadcn-vue.com/docs/components/carousel

Install the autoplay plugin for the carousel using your package manager.

```bash
pnpm add embla-carousel-autoplay
```

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

### meta example in registry-item.json

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

Adds additional metadata as key/value pairs to the registry item.

```json
{
  "meta": { "foo": "bar" }
}
```

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

### Install optional icon dependencies

Source: https://shadcn-vue.com/docs/dark-mode/astro

Optionally install @iconify/vue and @iconify-json/radix-icons to include icons for the theme button.

```bash
pnpm add -D @iconify/vue @iconify-json/radix-icons
```
Tokens:
Raw