### Create a Vue component

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

Example of a simple Vue component using the script setup syntax.

```vue
<script setup lang="ts">
import { Button } from "@/components/ui/button"
</script>

<template>
  <Button>Hello World</Button>
</template>
```

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

### Installation Commands

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

Commands to install the Empty component via the CLI.

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

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

### Define installation documentation

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

Use the docs property to display a custom message to the user after installing the registry item via the CLI.

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

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

### Installation via CLI

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

Command to add the Input component to your project.

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

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

### Implement Navigation Menu in Vue

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

A complete example showing the setup of a Navigation Menu with triggers, content panels, and custom list items.

```vue
<script setup lang="ts">
import { CircleCheckIcon, CircleHelpIcon, CircleIcon } from '@lucide/vue'
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu'
// eslint-disable-next-line import/no-named-default
import { default as ListItem } from './NavigationMenuItem.vue'

const components: { title: string, href: string, description: string }[] = [
  {
    title: 'Alert Dialog',
    href: '/docs/primitives/alert-dialog',
    description:
      'A modal dialog that interrupts the user with important content and expects a response.',
  },
  {
    title: 'Hover Card',
    href: '/docs/primitives/hover-card',
    description:
      'For sighted users to preview content available behind a link.',
  },
  {
    title: 'Progress',
    href: '/docs/primitives/progress',
    description:
      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
  },
  {
    title: 'Scroll-area',
    href: '/docs/primitives/scroll-area',
    description: 'Visually or semantically separates content.',
  },
  {
    title: 'Tabs',
    href: '/docs/primitives/tabs',
    description:
      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
  },
  {
    title: 'Tooltip',
    href: '/docs/primitives/tooltip',
    description:
      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
  },
]
</script>

<template>
  <NavigationMenu :viewport="false">
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Home</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
            <li class="row-span-3">
              <NavigationMenuLink as-child>
                <a
                  class="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
                  href="/"
                >
                  <div class="mt-4 mb-2 text-lg font-medium">
                    shadcn/ui
                  </div>
                  <p class="text-muted-foreground text-sm leading-tight">
                    Beautifully designed components built with Tailwind CSS.
                  </p>
                </a>
              </NavigationMenuLink>
            </li>
            <ListItem to="/docs" title="Introduction">
              Re-usable components built using Radix UI and Tailwind CSS.
            </ListItem>
            <ListItem to="/docs/installation" title="Installation">
              How to install dependencies and structure your app.
            </ListItem>
            <ListItem to="/docs/primitives/typography" title="Typography">
              Styles for headings, paragraphs, lists...etc
            </ListItem>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
            <ListItem
              v-for="component in components"
              :key="component.title"
              :title="component.title"
              :to="component.href"
            >
              {{ component.description }}
            </ListItem>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
          <a href="/docs">Docs</a>
        </NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>List</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="grid w-[300px] gap-4">
            <li>
              <NavigationMenuLink as-child>
                <a href="#">
                  <div class="font-medium">Components</div>
                  <div class="text-muted-foreground">
                    Browse all components in the library.
                  </div>
                </a>
              </NavigationMenuLink>
              <NavigationMenuLink as-child>
                <a href="#">
                  <div class="font-medium">Documentation</div>
                  <div class="text-muted-foreground">
                    Learn how to use the library.
                  </div>
                </a>
              </NavigationMenuLink>
              <NavigationMenuLink as-child>
                <a href="#">
                  <div class="font-medium">Blog</div>
                  <div class="text-muted-foreground">
```

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

### Installation Command

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

Command to add the Kbd component to your project.

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

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

### Installation Command

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

Command to add the button component to your project.

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

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

### Install dependencies

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

Install the required packages for color mode management and optional icon support.

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

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

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

### Install project dependencies

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

Install the required utility and UI dependencies using your preferred package manager.

```shell
pnpm add class-variance-authority clsx tailwind-merge @lucide/vue tw-animate-css
```

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

### Install Item Component

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

Use the CLI to add the Item component to your project.

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

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

### Serve registry files

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

Start the development server to serve the generated registry files.

```bash
pnpm dev
```

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

### Install Icon Dependencies

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

Install iconify packages to provide theme toggle icons.

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

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

### Install Input OTP via CLI

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

Command to add the component to your project.

```bash
pnpm dlx shadcn-vue@latest add input-otp
```

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

### Basic Usage Example

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

A minimal implementation of a single-menu Menubar component.

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

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

Use the CLI to add the Toggle component to your project.

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

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

### Full registry-item.json Example

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

A complete example of a registry item definition including metadata and file mappings.

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

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

Use the CLI to add the Textarea component to your project.

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

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

### Install Attachment Component

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

Use the CLI to add the attachment component to your project.

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

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

### Basic Usage

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

A minimal example of implementing the AspectRatio component.

```vue
<script lang="ts">
import { AspectRatio } from '@/components/ui/aspect-ratio'
</script>

<template>
  <AspectRatio :ratio="16 / 9">
    <img src="..." alt="Image" class="rounded-md object-cover">
  </AspectRatio>
</template>
```

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

### Install Dialog Component

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

Use the CLI to add the Dialog component to your project.

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

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

### Install Message Component

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

Use the CLI to add the Message component to your project.

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

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

### Install Sidebar Component

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

Use the CLI to add the sidebar component to your project.

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

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

### Install Bubble component

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

Use the CLI to add the Bubble component to your project.

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

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

### Installation Command

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

Command to add the Select component to your project using the shadcn-vue CLI.

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

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

### Install Field Component

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

Use the CLI to add the Field component to your project.

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

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

### Installation Command

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

Command to add the Menubar component to your project using the shadcn-vue CLI.

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

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

### Configure Base Color

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

Example of the interactive prompt for setting the base color in components.json.

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

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

### Implement Message Scroller with Provider

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

Full implementation example showing the MessageScroller components and the provider setup for managing a list of messages.

```typescript
<script setup lang="ts">
import type { DemoMessage } from '@/lib/message-scroller-demo'
import { defineComponent, h } from 'vue'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerProvider,
  MessageScrollerViewport,
  useMessageScroller,
} from '@/components/ui/message-scroller'

const messages: DemoMessage[] = [
  {
    id: 'command-activation',
    role: 'user',
    text: 'We\'re seeing activation dip after workspace creation. Can you help me find the likely step?',
  },
  {
    id: 'command-activation-reply',
    role: 'assistant',
    text: 'The sharpest drop is between creating the workspace and inviting the first teammate.\n\nWorkspace creation is still healthy, but the invite step is where users pause. That suggests the product is asking for collaboration before the user has enough confidence in the workspace.',
  },
  {
    id: 'command-compare',
    role: 'user',
    text: 'What should I compare before we change the onboarding flow?',
  },
  {
    id: 'command-compare-reply',
    role: 'assistant',
    text: 'Compare three cohorts:\n\n1. Users who choose a template before inviting teammates.\n2. Users who start from a blank workspace.\n3. Users who skip invites and return within 24 hours.\n\nIf template users invite faster, the fix is probably better first-run guidance rather than a louder invite prompt.',
  },
  {
    id: 'command-experiment',
    role: 'user',
    text: 'Can you turn that into an experiment?',
  },
  {
    id: 'command-experiment-reply',
    role: 'assistant',
    text: 'Yes. Create a variant that shows a short checklist after workspace creation:\n\n- Pick a template.\n- Add one project detail.\n- Invite a teammate when the workspace has context.\n\nMeasure first invite completion, 24-hour return rate, and whether teams create a second project.',
  },
  {
    id: 'command-risk',
    role: 'user',
    text: 'What\'s the risk if we delay the invite prompt?',
  },
  {
    id: 'command-risk-reply',
    role: 'assistant',
    text: 'The main risk is reducing team creation for accounts that already know who they want to invite.\n\nTo protect that path, keep the invite action visible in the header and only change the primary empty-state guidance. That gives confident teams a direct route without forcing uncertain users through the invite step too early.',
  },
]

const userMessages = messages.filter(message => message.role === 'user')

function getTrimmedMessageText(message: DemoMessage) {
  const text = message.text
  return text.length > 42 ? `${text.slice(0, 39)}...` : text
}

```

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

### Install Node Types

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

Install type definitions for Node.js to support path resolution.

```bash
pnpm add -D @types/node
```

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

### Fetch component documentation

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

Use the docs command to retrieve API references and usage examples for specific components.

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

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

### Message Scroller Script Setup

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

Imports and setup for the MessageScroller component and its associated sub-components.

```typescript
<script setup lang="ts">
import type { DemoMessage } from '@/lib/message-scroller-demo'
import { RotateCwIcon } from '@lucide/vue'
import { computed, ref } from 'vue'
import { toast } from 'vue-sonner'
import { createDemoChat } from '@/lib/message-scroller-demo'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Marker, MarkerContent } from '@/components/ui/marker'
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from '@/components/ui/message-scroller'
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/tooltip'
```

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

### Add components to project

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

Use the add command to install specific components or all available components into your project.

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

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

### Install TanStack Table Dependency

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

Command to install the required TanStack Vue Table package.

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

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

### View build command help

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

Displays the usage and available options for the build command.

```text
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 TypeScript Dependency

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

Install TypeScript if you encounter errors related to missing 'sys' properties.

```bash
pnpm add -D typescript
```

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

### Run Nuxt Prepare

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

Generate the necessary .nuxt folder for a new project.

```bash
pnpm dlx nuxi prepare
```

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

### Install shadcn-vue CLI

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

Install the latest version of the shadcn-vue CLI using your preferred package manager.

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

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

### Install Dark Mode Dependencies

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

Install the required @vueuse/core package to manage color mode state.

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

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

### Add and Use Components

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

Add components via CLI and use them directly in templates.

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

```html
<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>
```

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

### Install Autoplay plugin

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

Install the required Embla Carousel Autoplay package via your package manager.

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

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

### Create an Astro project

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

Initialize a new Astro project with Tailwind CSS and Vue support.

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

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

### Complex Form Setup Imports

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

Initial setup imports for a complex form using Vee-Validate and Zod.

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

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

### Full Menubar Implementation

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

A comprehensive example demonstrating nested menus, radio groups, checkbox items, and keyboard shortcuts.

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

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

### Install block with primitive overrides

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

Installs a block while overriding specific primitives using remote registry 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"
  ]
}
```

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

### Full Sidebar Demo Implementation

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

A complete example integrating SidebarProvider, Sidebar, SidebarInset, and a dynamic menu.

```vue
```
<script setup lang="ts">
import { Calendar, Home, Inbox, Search, Settings } from "@lucide/vue"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

// Menu items.
const items = [
  {
    title: "Home",
    url: "#",
    icon: Home,
  },
  {
    title: "Inbox",
    url: "#",
    icon: Inbox,
  },
  {
    title: "Calendar",
    url: "#",
    icon: Calendar,
  },
  {
    title: "Search",
    url: "#",
    icon: Search,
  },
  {
    title: "Settings",
    url: "#",
    icon: Settings,
  },
]
</script>

<template>
  <SidebarProvider>
    <Sidebar>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Application</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem v-for="item in items" :key="item.title">
                <SidebarMenuButton as-child>
                  <a :href="item.url">
                    <component :is="item.icon" />
                    <span>{{ item.title }}</span>
                  </a>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
    <SidebarInset>
      <header class="flex items-center justify-between px-4 h-12">
        <SidebarTrigger />
      </header>
    </SidebarInset>
  </SidebarProvider>
</template>
```
```

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

### Initialize a new project with pnpm

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

Initializes a new shadcn-vue project using pnpm.

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

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

### Install Color Mode Dependency

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

Install the required Nuxt color mode module using your preferred package manager.

```bash
pnpm add -D @nuxtjs/color-mode
```

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

### Retrieve project information

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

Use the info command to display configuration and environment details for the current project.

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

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

### Group Chat Setup

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

Script setup for a group chat interface, defining types for events and messages with optional scroll anchoring.

```typescript
<script setup lang="ts">
import { RotateCwIcon } from '@lucide/vue'
import { computed, ref } from 'vue'
import { Bubble, BubbleContent } from '@/components/ui/bubble'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Marker, MarkerContent } from '@/components/ui/marker'
import {
  Message,
  MessageContent,
  MessageHeader,
} from '@/components/ui/message'
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from '@/components/ui/message-scroller'
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/tooltip'

type GroupChatItem
  = | {
    id: string
    type: 'event'
    text: string
    scrollAnchor?: boolean
  }
  | {
    id: string
    type: 'message'
    sender: string
    role: 'assistant' | 'participant'
    text: string
    scrollAnchor?: boolean
  }

const currentUser = 'Grace'
```

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

### Initialize Demo Chat and Message Handling

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

Sets up the chat demo instance and defines the submission logic for streaming messages.

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

const { messages, status, nextMessage, send, reset } = useDemoChat(chat, { chunkDelayMs: 20 })

const isBusy = computed(() => status.value === 'streaming')

function onSubmit() {
  if (!nextMessage.value || isBusy.value)
    return
  send()
}
```

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

### Initialize a new project using the create alias

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

Initializes a new project using the create command, which is an alias for init.

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

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

### Default Toggle Example

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

A standard toggle button with an icon.

```vue
<script setup lang="ts">
import { Bold } from '@lucide/vue'
import { Toggle } from '@/components/ui/toggle'
</script>

<template>
  <Toggle aria-label="Toggle bold">
    <Bold class="h-4 w-4" />
  </Toggle>
</template>
```

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

### Slider Usage Example

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

A minimal implementation of the Slider component.

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

<template>
  <Slider :default-value="[33]" :max="100" :step="1" />
</template>
```

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

### Initialize MCP Server

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

Run the initialization command in your project to configure the MCP server for your specific client.

```bash
pnpm dlx shadcn-vue@latest mcp init --client claude
```

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

### Create Nuxt Project

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

Initialize a new Nuxt project using the create-nuxt-app command.

```bash
pnpm create nuxt@latest
```

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

### KbdGroup API Example

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

Basic usage of the KbdGroup component.

```vue
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>
```

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

### Kbd API Example

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

Basic usage of the Kbd component.

```vue
<Kbd>
Ctrl
</Kbd>
```

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

### Disabled Input Example

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

Input field in a disabled state.

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

<template>
  <Input disabled type="email" placeholder="Email" />
</template>
```

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

### Basic Skeleton Usage

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

A simple example of a rounded skeleton placeholder.

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

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

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

### Install Context Menu via CLI

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

Use the shadcn-vue CLI to add the component to your project.

```bash
pnpm dlx shadcn-vue@latest add context-menu
```

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

### Install Drawer via CLI

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

Use the shadcn-vue CLI to add the Drawer component to your project.

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