### Date Picker Component Installation Example

Source: https://www.shadcn-vue.com/docs/components/date-picker.html

Illustrates the installation process for the Date Picker component in shadcn/vue. It highlights the dependency on Popover, Calendar, and Range Calendar components, suggesting users refer to their respective installation guides.

```bash
npm install @shadcn/ui
# or
yarn add @shadcn/ui
# or
pnpm add @shadcn/ui
```

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

### Configure Project Initialization Prompts

Source: https://context7_llms

Shows example prompts and expected user input for the 'shadcn-vue init' command, covering style, base color, and CSS variable preferences. This guides users through the project setup process.

```bash
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
```

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

### Example Component for Registry (Vue)

Source: https://context7_llms

A simple <HelloWorld /> component example intended to be part of a component registry. It demonstrates basic Vue structure with <script setup> and <template>, importing and using a Shadcn-Vue Button component. This code is placed within a specific directory structure (e.g., registry/[NAME]/ComponentName/ComponentName.vue).

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

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

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

### Vue <script setup> Basic Syntax

Source: https://vuejs.org/api/sfc-script-setup.html

This snippet demonstrates how to opt-in to the <script setup> syntax by adding the 'setup' attribute to the <script> block. Code within this block executes every time a component instance is created, providing direct access to top-level bindings in the template.

```vue
<script setup>
console.log('hello script setup')
</script>
```

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

### Line Chart Component Installation (Vue)

Source: https://context7_llms

Provides instructions for installing the line chart component for shadcn-vue. This involves running an npm command and potentially following a separate setup guide for chart configurations.

```bash
npx shadcn-vue@latest add chart-line
```

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

### Create Nuxt Project

Source: https://context7_llms

Initializes a new Nuxt.js project using npm. It addresses a potential error during setup by recommending the installation of TypeScript.

```bash
npm create nuxt@latest
```

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

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

### React Table Basic Example

Source: https://tanstack.com/table/v8/docs/api/features/pagination

A fundamental example demonstrating the basic setup and usage of TanStack Table v8 with React. It showcases essential configurations for creating a functional data table.

```jsx
import React from 'react';
import { useReactTable, getCoreRowModel } from '@tanstack/react-table';

function BasicTable({ data, columns }) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default BasicTable;
```

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

### Carousel: Installation and Basic Structure (Vue)

Source: https://context7_llms

Shows the command for installing the Carousel component and its basic structural usage. It utilizes the Embla Carousel library. The example includes importing Carousel and its sub-components (CarouselContent, CarouselItem, CarouselNext, CarouselPrevious) for a functional carousel setup.

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

```vue
<script setup lang="ts">
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel'
</script>

<template>
  <Carousel>
    <CarouselContent>
      <CarouselItem>...</CarouselItem>
      <CarouselItem>...</CarouselItem>
      <CarouselItem>...</CarouselItem>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</template>
```

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

### Calendar: Installation and Basic Usage (Bash/Vue)

Source: https://context7_llms

Provides the command to install the Calendar component using shadcn-vue CLI. It also mentions the component's reliance on [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) for date handling and its use in building date pickers. No direct code example for Calendar usage is provided in this snippet.

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

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

### Vue <script setup> Using Components

Source: https://vuejs.org/api/sfc-script-setup.html

Demonstrates how to import and use components directly within the template when using <script setup>. Imported components are treated like variables, and PascalCase is recommended for clarity.

```vue
<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>
```

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

### Install Form Dependencies (Manual)

Source: https://context7_llms

Command to install necessary npm packages for manual form setup, including reka-ui, vee-validate, and Zod. These packages are crucial for schema validation and form management.

```bash
npm install reka-ui vee-validate @vee-validate/zod zod
```

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

### Vue <script setup> Dynamic Components

Source: https://vuejs.org/api/sfc-script-setup.html

Explains how to use dynamic components with the `:is` binding inside <script setup>. This allows for rendering different components based on component variables.

```vue
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const componentToRender = Math.random() > 0.5 ? Foo : Bar;
</script>

<template>
  <component :is="componentToRender" />
</template>
```

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

### Install @unovis/ts and @unovis/vue

Source: https://github.com/unovue/shadcn-vue/issues/1077

This command installs the Unovis TypeScript and Vue packages, which are essential for using charts in shadcn-vue. Ensure you have npm or yarn installed.

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

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

### Manual Installation Dependencies

Source: https://context7_llms

Lists the necessary dependencies and configuration for manual installation of shadcn-vue.

```APIDOC
## Manual Installation Dependencies

### Description
Installs shadcn-vue components manually by adding dependencies and configuring path aliases.

### Dependencies
```bash
npm install class-variance-authority clsx tailwind-merge lucide-vue-next tw-animate-css
```

### Configuration (`tsconfig.json`)
```json:line-numbers {3-6} title="tsconfig.json"
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```
```

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

### Vue <script setup> Namespaced Components

Source: https://vuejs.org/api/sfc-script-setup.html

Illustrates how to use component tags with dots, such as 'Namespace.Component', to refer to nested components within a <script setup> context.

```vue
<script setup>
import Namespace from './components/Namespace.vue'
</script>

<template>
  <Namespace.MyNestedComponent />
</template>
```

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

### Date Picker Component Installation

Source: https://www.shadcn-vue.com/docs/components/date-picker

Explains the installation process for the Date Picker component, which relies on other components like Popover and Calendar. Refer to the installation instructions for Popover, Calendar, and Range Calendar for complete setup.

```markdown
The Date Picker is built using a composition of the `Popover` and either the `Calendar` or `RangeCalendar` components. See installations instructions for the Popover, Calendar, and Range Calendar components.
```

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

### Install and Use shadcn-vue Field Component

Source: https://context7_llms

This example demonstrates the installation command for the shadcn-vue 'field' component and its usage within a Vue.js template. It showcases how to combine labels, inputs, descriptions, and errors for accessible form elements.

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

```vue
<script setup lang="ts">
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@/components/ui/field"
</script>

<template>
  <FieldSet>
    <FieldLegend>Profile</FieldLegend>
    <FieldDescription>This appears on invoices and emails.</FieldDescription>
    <FieldGroup>
      <Field>
        <FieldLabel for="name">Full name</FieldLabel>
        <Input id="name" autoComplete="off" placeholder="Evil Rabbit" />
        <FieldDescription>This appears on invoices and emails.</FieldDescription>
      </Field>
      <Field>
        <FieldLabel for="username">Username</FieldLabel>
        <Input id="username" autoComplete="off" aria-invalid />
        <FieldError>Choose another username.</FieldError>
      </Field>
      <Field orientation="horizontal">
        <Switch id="newsletter" />
        <FieldLabel for="newsletter">Subscribe to the newsletter</FieldLabel>
      </Field>
    </FieldGroup>
  </FieldSet>
</template>
```

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

### Using Top-Level Await in Vue 3's <script setup>

Source: https://vuejs.org/api/sfc-script-setup.html

Demonstrates the use of top-level `await` within the `<script setup>` block in Vue 3. This feature compiles to an `async setup()` function, preserving component instance context after the `await`. It requires the use of `Suspense`, which is currently an experimental feature.

```vue
<script setup lang="ts">
const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>
```

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

### Vue <script setup> Reactivity with ref

Source: https://vuejs.org/api/sfc-script-setup.html

Shows how to declare reactive state using the `ref` function from Vue's reactivity API within a <script setup> block. Refs are automatically unwrapped when used in templates.

```vue
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <p>Count is: {{ count }}</p>
  <button @click="count++">Increment</button>
</template>
```

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

### Install shadcn/vue Charts

Source: https://www.shadcn-vue.com/docs/charts.html

Instructions for installing the shadcn/vue Charts component. This typically involves adding the component to your project, potentially through a CLI command or manual setup.

```bash
npm install shadcn-vue-charts
# or
yarn add shadcn-vue-charts
# or
pnpm add shadcn-vue-charts
```

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

### Using Custom Directives in Vue <script setup>

Source: https://vuejs.org/api/sfc-script-setup.html

Explains how to use both globally registered and locally defined custom directives within Vue's <script setup>. Local directives must follow the naming convention `vNameOfDirective`. The example shows how to define and use a local directive.

```vue
<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    // do something with the element
  }
}
</script>
```

```vue
import { myDirective as vMyDirective } from './MyDirective.js'
```

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

### Install Input Component

Source: https://context7_llms

Installs the 'input' component using the shadcn-vue CLI. This command fetches and adds the necessary files for the input component to your project.

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

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

### Install shadcn-vue Select Component

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

Installs the Select component using pnpm. This is the primary method for adding the component to your project.

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

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

### Install shadcn-vue Drawer Component

Source: https://context7_llms

This command installs the Drawer component and its dependencies using the shadcn-vue CLI. Ensure you have npx available in your environment.

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

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

### shadcn/vue Input Component Examples

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

Provides various examples of the Input component in shadcn/vue, showcasing different configurations like default, file input, disabled state, input with a label, input with an appended button, input with an icon, and a complete form submission example.

```vue
<template>
  <Input type="text" placeholder="Username" />
</template>
```

```vue
<template>
  <Input type="file" />
</template>
```

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

```vue
<template>
  <div class="grid w-full max-w-sm items-center gap-1.5">
    <Label htmlFor="email">Email</Label>
    <Input type="email" id="email" placeholder="Email" />
  </div>
</template>
```

```vue
<template>
  <div class="flex w-full max-w-sm items-center space-x-2">
    <Input type="text" placeholder="Subscribe" />
    <Button type="submit">Subscribe</Button>
  </div>
</template>
```

```vue
<template>
  <div class="relative flex items-center">
    <Search class="absolute left-2.5 h-4 w-4 text-muted-foreground" />
    <Input type="text" placeholder="Search..." class="pl-8" />
  </div>
</template>
```

```vue
<template>
  <form class="grid w-full max-w-sm items-center gap-1.5">
    <Label htmlFor="username">Username</Label>
    <Input type="text" id="username" placeholder="This is your public display name." />
    <Button type="submit">Submit</Button>
  </form>
</template>
```

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

### Install shadcn-vue Stepper Component

Source: https://context7_llms

This command installs the Stepper component for shadcn-vue. It requires npx and the shadcn-vue CLI. No specific inputs or outputs are detailed beyond the installation process.

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

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

### Vue <script setup> Top-Level Bindings and Imports

Source: https://vuejs.org/api/sfc-script-setup.html

Illustrates how variables, function declarations, and imports declared within <script setup> are directly accessible in the component's template. This reduces boilerplate compared to the normal <script> syntax.

```vue
<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}

import { capitalize } from './helpers'
</script>

<template>
  <p>{{ msg }}</p>
  <button @click="log">Log Message</button>
  <p>{{ capitalize('hello') }}</p>
</template>
```

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

### Install shadcn-vue Toggle Component

Source: https://context7_llms

Command to install the Toggle component using the shadcn-vue CLI. This is the initial step before using the Toggle component in your project.

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

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

### Install Resizable Component (Bash)

Source: https://context7_llms

Command to install the resizable component using npm via the shadcn-vue CLI.

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

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

### Install shadcn-vue Toast Component

Source: https://context7_llms

Installs the 'toast' component using the shadcn-vue CLI. This command fetches and adds the necessary component files to your project.

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

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

### Install shadcn-vue Empty Component

Source: https://context7_llms

This command installs the Empty component and its dependencies using the shadcn-vue CLI. Ensure you have npx available in your environment.

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

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

### Bash Command for shadcn-vue Dialog Installation

Source: https://context7_llms

Command to install the dialog component using the shadcn-vue CLI. This command should be run in your project's terminal. It assumes you have npx and shadcn-vue installed.

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

```

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

### Install Component from Registry URL

Source: https://context7_llms

Installs a component from a remote registry using its URL. This is useful for adding components hosted on a separate registry server.

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

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

### Install Textarea Component with CLI

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

Installs the Textarea component using the shadcn-vue CLI. This is the recommended method for adding components.

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

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

### Install PIN Input Component

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

Instructions for installing the PIN Input component using different package managers. This is a prerequisite for using the component in your project.

```shell
pnpm dlx shadcn-vue@latest add pin-input
```

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

### Install Collapsible Component using CLI

Source: https://context7_llms

Demonstrates the command to install the Collapsible component using the shadcn-vue CLI. This is a prerequisite for using the component in a project.

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

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

### Defining Props and Emits in Vue <script setup>

Source: https://vuejs.org/api/sfc-script-setup.html

Illustrates the use of `defineProps` and `defineEmits` compiler macros within Vue's `<script setup>` for declaring component props and emitted events with full type inference. These macros are automatically available and are compiled away during the build process.

```vue
<script setup>
const props = defineProps({
  foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup code
</script>
```

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

### Install Tailwind CSS with Vite Plugin

Source: https://tailwindcss.com/docs/installation

Commands to create a new Vite project and install Tailwind CSS and its Vite plugin. This is the initial setup for integrating Tailwind CSS into a Vite-based project.

```bash
npm create vite@latest my-project
cd my-project
npm install tailwindcss @tailwindcss/vite
```

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

### Install shadcn-vue Tooltip Component

Source: https://context7_llms

Command to install the Tooltip component using the shadcn-vue CLI. This command fetches and adds the Tooltip component files to your project.

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

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

### CLI Options for Project Initialization

Source: https://context7_llms

Details the available options for the 'shadcn-vue init' CLI command, including defaults, force overwrite, skipping prompts, and specifying the current working directory. These options allow for customized project setup.

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

initialize your project and install dependencies

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

Options:
  -d, --defaults    use default values i.e new-york, zinc and css variables. (default: false)
  -f, --force       force overwrite of existing components. (default: false)
  -y, --yes         skip confirmation prompt. (default: false)
  -c, --cwd <cwd>   the working directory. defaults to the current directory.
  -h, --help       display help for command
```

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

### Combining <script> and <script setup> in Vue Components

Source: https://vuejs.org/api/sfc-script-setup.html

Illustrates how to use a normal `<script>` block alongside `<script setup>` in Vue components. This is typically done for declaring options not expressible in `<script setup>` (like `inheritAttrs` or custom plugin options), declaring named exports, or running side effects. Mixing APIs is discouraged unless necessary.

```vue
<script>
// normal <script>, executed in module scope (only once)
runSideEffectOnce()

// declare additional options
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script setup>
// <script setup> code
</script>
```

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

### Install shadcn-vue Dropdown Menu Component

Source: https://context7_llms

This command installs the DropdownMenu component and its dependencies using the shadcn-vue CLI. Ensure you have npx available in your environment.

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

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

### Basic Item Usage with Script Setup

Source: https://context7_llms

Demonstrates the fundamental usage of the Item component and its sub-components in a Vue.js application using the `<script setup>` syntax. It shows how to import and structure the components for rendering a standard item layout.

```vue
<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemHeader,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item'
</script>

<template>
  <Item>
    <ItemHeader>Item Header</ItemHeader>
    <ItemMedia />
    <ItemContent>
      <ItemTitle>Item</ItemTitle>
      <ItemDescription>Item</ItemDescription>
    </ItemContent>
    <ItemFooter>Item Footer</ItemFooter>
  </Item>
</template>
```

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

### Custom Documentation Message for Registry Items

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

Provides a custom documentation message or instruction to be displayed when a registry item is installed via the CLI. This is useful for guiding users on necessary setup steps.

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

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

### Install shadcn-vue Switch Component

Source: https://context7_llms

This command installs the Switch component for shadcn-vue using the shadcn-vue CLI. It's a prerequisite for using the Switch component in a project.

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

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

### Install Combobox Component using CLI

Source: https://context7_llms

Shows the command to install the Combobox component using the shadcn-vue CLI. This component provides autocomplete and command palette functionality.

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

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

### Initialize shadcn/vue Project (bun)

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

Initializes a new project with shadcn/vue, installing dependencies, setting up the 'cn' utility, and configuring Tailwind CSS. It prompts the user for style, base color, and CSS variable preferences.

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

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

### Install Drawer Component with shadcn/vue CLI

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

This command uses the shadcn/vue CLI to add the Drawer component to your project. Ensure you have shadcn/vue installed.

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

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

### Start Tailwind CSS Development Server

Source: https://tailwindcss.com/docs/installation

This command initiates the development server for a project using Tailwind CSS. It's a common step to see your styles reflected in real-time during development. No specific input or output is detailed, but it implies a running development environment.

```bash
npm run dev
```

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

### Initialize shadcn-vue CLI with Components

Source: https://context7_llms

Initializes a new project with shadcn-vue, specifying components to be installed. This command uses the latest version of the CLI and allows for the inclusion of multiple components in a single initialization command.

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

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

### Basic HTML Structure with Tailwind CSS Utility Classes

Source: https://tailwindcss.com/docs/installation

Demonstrates how to apply Tailwind CSS utility classes directly within HTML to style content. This example shows a simple heading styled with Tailwind. Ensure your compiled CSS is correctly included in your project for these classes to take effect.

```html
<h1>
  Hello world!
</h1>
```

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

### shadcn/vue init Command Options

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

Lists the available options for the 'shadcn-vue init' command, including defaults, force overwrite, skipping confirmation, specifying the working directory, and displaying help.

```bash
Usage: shadcn-vue init [options] [components...]
initialize your project and install dependencies

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

Options:
  -d, --defaults      use default values i.e new-york, zinc and css variables. (default: false)
  -f, --force         force overwrite of existing components.json. (default: false)
  -y, --yes           skip confirmation prompt. (default: false)
  -c, --cwd           the working directory. defaults to the current directory.
  -h, --help          display help for command
```

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

### Install shadcn-vue Tabs Component

Source: https://context7_llms

This command installs the Tabs component for shadcn-vue using the shadcn-vue CLI. This is a necessary step before implementing tabbed interfaces.

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

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

### Install Reka UI Package

Source: https://reka-ui.com/docs/guides/migration

Installs the latest 'reka-ui' package using npm. This is the first step in the migration process.

```bash
npm add reka-ui
```

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

### Install shadcn-vue Table Component

Source: https://context7_llms

This command installs the Table component for shadcn-vue via the shadcn-vue CLI. It's the first step to using the table component in your project.

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

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

### Initialize shadcn/vue Project (npm)

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

Initializes a new project with shadcn/vue, installing dependencies, setting up the 'cn' utility, and configuring Tailwind CSS. It prompts the user for style, base color, and CSS variable preferences.

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

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

### Initialize shadcn/vue Project (pnpm)

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

Initializes a new project with shadcn/vue, installing dependencies, setting up the 'cn' utility, and configuring Tailwind CSS. It prompts the user for style, base color, and CSS variable preferences.

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

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

### shadcn-vue Charts: Basic Area Chart Example

Source: https://context7_llms

A basic example of rendering an AreaChart component in Vue. It takes data and an array of colors as props. Ensure you have the necessary chart components and dependencies installed.

```vue
<template>
  <AreaChart
    :data="data"
    :colors="['blue', 'pink', 'orange', 'red']"
  />
</template>
```

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

### Vue Input Group API Example

Source: https://context7_llms

Demonstrates the basic structure of an InputGroup with an InputGroupInput and an InputGroupAddon. This example highlights the fundamental layout for combining inputs with supplementary elements.

```vue
<template>
  <InputGroup>
    <InputGroupInput />
    <InputGroupAddon />
  </InputGroup>
</template>
```

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

### Calendar Date Paging Function Example

Source: https://reka-ui.com/docs/guides/migration

Provides a TypeScript example function for handling date subtraction and addition in the Calendar component, likely related to page navigation.

```typescript
function pagingFunc(date: DateValue, sign: -1 | 1) {
  if (sign === -1)
    return date.subtract({ years: 1 });
  return date.add({ years: 1 });
}
```

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

### Initialize shadcn-vue CLI

Source: https://context7_llms

Command to run the shadcn-vue initialization process. This command sets up the project for using shadcn-vue components, configuring necessary settings.

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

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

### Create Astro Project with Tailwind and Vue

Source: https://context7_llms

Command to create a new Astro project, pre-configured with Tailwind CSS and Vue support. The `--install` flag automatically installs dependencies, and `--git` initializes a Git repository.

```bash
npx create-astro@latest astro-app  --template with-tailwindcss --install --add vue --git
```

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

### Install and Use ButtonGroup Component in Vue

Source: https://context7_llms

Provides installation instructions for the shadcn-vue ButtonGroup component and its related components (Separator, Text). It includes example Vue code for basic usage and demonstrates accessibility features like ARIA attributes.

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

```vue
<script setup lang="ts">
import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from '@/components/ui/button-group'
</script>

<template>
  <ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </ButtonGroup>
</template>

```

```vue
<template>
  <ButtonGroup aria-label="Button group">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </ButtonGroup>
</template>

```

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

### Basic Textarea Usage in Vue

Source: https://context7_llms

Example of how to import and use the Textarea component within a Vue application's script setup and template.

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

<template>
  <Textarea />
</template>
```

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

### Initialize shadcn/vue Project (yarn)

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

Initializes a new project with shadcn/vue, installing dependencies, setting up the 'cn' utility, and configuring Tailwind CSS. It prompts the user for style, base color, and CSS variable preferences.

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

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

### CLI Options for Adding Components

Source: https://context7_llms

Details the options available for the 'shadcn-vue add' command, including skipping confirmation, overwriting existing files, specifying the working directory, adding all components, and setting a custom path. These options enhance flexibility.

```txt
Usage: shadcn-vue add [options] [components...]

add a component to your project

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

Options:
  -y, --yes          skip confirmation prompt. (default: false)
  -o, --overwrite    overwrite existing files. (default: false)
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -a, --all          add all available components. (default: false)
  -p, --path <path>  the path to add the component to.
  -h, --help         display help for command
```

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

### Configure Vite for Tailwind CSS Plugin

Source: https://tailwindcss.com/docs/installation

Configuration snippet for `vite.config.ts` to include the `@tailwindcss/vite` plugin. This enables Tailwind CSS processing within the Vite build pipeline.

```typescript
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})
```

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

### Initialize Embla Carousel with Constructor Options (Solid)

Source: https://www.embla-carousel.com/api/options

Provides an example of initializing Embla Carousel with constructor options in a Solid.js application using 'embla-carousel-solid'. Options are passed to the createEmblaCarousel function.

```javascript
import createEmblaCarousel from 'embla-carousel-solid'

export function EmblaCarousel() {
  const [emblaRef] = createEmblaCarousel(() => ({ loop: true }))
  // ...
}
```

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

### Date Range Picker - Basic Usage

Source: https://www.shadcn-vue.com/docs/components/date-picker

Shows how to use the Date Picker component to select a range of dates. This example illustrates the implementation for selecting a start and end date.

```vue
<template>
  <DateRangePicker />
</template>

<script setup lang="ts">
import DateRangePicker from './components/ui/date-picker/DateRangePicker.vue'
</script>
```

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

### Vue Command Menu Component Setup

Source: https://context7_llms

Shows how to set up and use the Command component from shadcn-vue for creating command menus. It includes basic structure with input, list, groups, and separators. No external dependencies are explicitly mentioned for this basic usage.

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

<template>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem value="calendar">
          Calendar
        </CommandItem>
        <CommandItem value="search-emoji">
          Search Emoji
        </CommandItem>
        <CommandItem value="calculator">
          Calculator
        </CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Settings">
        <CommandItem value="profile">
          Profile
        </CommandItem>
        <CommandItem value="billing">
          Billing
        </CommandItem>
        <CommandItem value="settings">
          Settings
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

```

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

### Sample Data for Music Revenue (TypeScript)

Source: https://unovis.dev/

This snippet provides a sample array of DataRecord objects, representing music revenue data by year. Each record includes the year and revenue for vinyl, CD, streaming, cassette, and download formats.

```typescript
export const data: DataRecord[] = [
  {
    year: 1973,
    vinyl: 1.436,
    cd: 0,
    streaming: 0,
    cassette: 0.5806,
    download: 0,
  },
  {
    year: 1974,
    vinyl: 1.55,
    cd: 0,
    streaming: 0,
    cassette: 0.6497,
    download: 0,
  },
  {
    year: 1975,
    vinyl: 1.6965,
    cd: 0,
    streaming: 0,
    cassette: 0.692,
    download: 0,
  },
  {
    year: 1976,
    vinyl: 1.9081,
    cd: 0,
    streaming: 0,
    cassette: 0.829,
    download: 0,
  },
  {
    year: 1977,
    vinyl: 2.4402,
    cd: 0,
    streaming: 0,
    cassette: 1.0606,
    download: 0,
  },
  {
    year: 1978,
    vinyl: 2.7336,
    cd: 0,
    streaming: 0,
    cassette: 1.3978,
    download: 0,
  },
  {
    year: 1979,
    vinyl: 2.4106,
    cd: 0,
    streaming: 0,
    cassette: 1.2649,
    download: 0,
  },
  {
    year: 1980,
    vinyl: 2.45,
    cd: 0,
    streaming: 0,
    cassette: 1.232,
    download: 0,
  },
  {
    year: 1981,
    vinyl: 2.5981,
    cd: 0,
    streaming: 0,
    cassette: 1.3758,
    download: 0,
  },
  {
    year: 1982,
    vinyl: 2.2081,
    cd: 0,
    streaming: 0,
    cassette: 1.4205,
    download: 0,
  },
  {
    year: 1983,
    vinyl: 1.9583,
    cd: 0.0172,
    streaming: 0,
    cassette: 1.8109,
    download: 0,
  },
  {
    year: 1984,
    vinyl: 1.8475,
    cd: 0.1033,
    streaming: 0,
    cassette: 2.3839,
    download: 0,
  },
  {
    year: 1985,
    vinyl: 1.5615,
    cd: 0.3895,
    streaming: 0,
    cassette: 2.4115,
    download: 0,
  },
  {
    year: 1986,
    vinyl: 1.2111,
    cd: 0.9301,
    streaming: 0,
    cassette: 2.4995,
    download: 0,
  },
  {
    year: 1987,
    vinyl: 0.9964,
    cd: 1.5936,
    streaming: 0,
    cassette: 2.974,
    download: 0,
  },
  {
    year: 1988,
    vinyl: 0.7126,
    cd: 2.0997,
    streaming: 0,
    cassette: 3.4424,
    download: 0,
  },
  {
    year: 1989,
    vinyl: 0.3367,
    cd: 2.7024,
    streaming: 0,
    cassette: 3.5404,
    download: 0,
  },
  {
    year: 1990,
    vinyl: 0.1809,
    cd: 3.6299,
    streaming: 0,
    cassette: 3.7303,
    download: 0,
  },
  {
    year: 1991,
    vinyl: 0.0933,
    cd: 4.4909,
    streaming: 0,
    cassette: 3.25,
    download: 0,
  },
  {
    year: 1992,
    vinyl: 0.0799,
    cd: 5.529,
    streaming: 0,
    cassette: 3.4151,
    download: 0,
  },
  {
    year: 1993,
    vinyl: 0.0618,
    cd: 6.7705,
    streaming: 0,
    cassette: 3.2143,
    download: 0,
  },
  {
    year: 1994,
    vinyl: 0.065,
    cd: 8.7517,
    streaming: 0,
    cassette: 3.2513,
    download: 0,
  },
  {
    year: 1995,
    vinyl: 0.0718,
    cd: 9.7086,
    streaming: 0,
    cassette: 2.5399,
    download: 0,
  },
  {
    year: 1996,
    vinyl: 0.0843,
    cd: 10.3549,
    streaming: 0,
    cassette: 2.0946,
    download: 0,
  },
  {
    year: 1997,
    vinyl: 0.0689,
    cd: 10.5117,
    streaming: 0,
    cassette: 1.6562,
    download: 0,
  },
  {
    year: 1998,
    vinyl: 0.0597,
    cd: 12.1372,
    streaming: 0,
    cassette: 1.5143,
    download: 0,
  },
  {
    year: 1999,
    vinyl: 0.0597,
    cd: 13.4154,
    streaming: 0,
    cassette: 1.1096,
    download: 0,
  },
  {
    year: 2000,
    vinyl: 0.054,
    cd: 13.6391,
    streaming: 0,
    cassette: 0.6306,
    download: 0,
  },
  {
    year: 2001,
    vinyl: 0.0588,
    cd: 13.324,
    streaming: 0,
    cassette: 0.3581,
    download: 0,
  },
  {
    year: 2002,
    vinyl: 0.0454,
    cd: 12.3606,
    streaming: 0,
    cassette: 0.2082,
    download: 0,
  },
  {
    year: 2003,
    vinyl: 0.0432,
    cd: 11.7031,
    streaming: 0,
    cassette: 0.1081,
    download: 0,
  },
  {
    year: 2004,
    vinyl: 0.0392,
    cd: 12.0918,
    streaming: 0.0069,
    cassette: 0.0237,
    download: 0.1835,
  },
  {
    year: 2005,
    vinyl: 0.0274,
    cd: 11.1545,
    streaming: 0.1709,
    cassette: 0.0131,
    download: 0.9243,
  },
  {
    year: 2006,
    vinyl: 0.0256,
  }
]
```

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

### Upgrade Tailwind CSS

Source: https://github.com/unovue/shadcn-vue/issues/1077

This command runs the Tailwind CSS upgrade tool to ensure compatibility with the latest version of Tailwind CSS. It helps in migrating to newer utility classes and configurations.

```bash
npx @tailwindcss/upgrade
```

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

### Vue Carousel: Handling 'select' Event

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

Example of how to listen for and handle the 'select' event from the carousel API in Vue. It demonstrates getting the API instance using '@init-api' and watching for changes.

```vue
import { nextTick, ref, watch } from 'vue'
import type { CarouselApi } from '@/components/ui/carousel'

const api = ref<CarouselApi>()

function setApi(val: CarouselApi) {
  api.value = val
}

const stop = watch(api, (api) => {
  if (!api) return
  // Watch only once or use watchOnce() in @vueuse/core
  nextTick(() => {
    // stop()
  })
  api.on('select', () => {
    console.log('Slide selected')
  })
})

<Carousel @init-api="setApi" class="w-full max-w-xs">
  <CarouselContent>
    <CarouselItem v-for="i in 10" :key="i">
      <Card>
        <CardContent class="flex aspect-square items-center justify-center p-6">
          <span>{{ i }}</span>
        </CardContent>
      </Card>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

```

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

### Import Tailwind CSS in Project Styles

Source: https://tailwindcss.com/docs/installation

CSS import statement to include Tailwind CSS in your project's main CSS file. This directive should be placed at the top of your CSS entry point.

```css
@import "tailwindcss";
```

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

### Development Setup for AutoForm Monorepo (Shell)

Source: https://github.com/vantezzen/auto-form

Instructions for setting up the development environment for the AutoForm monorepo. This involves installing dependencies and running the development server, which typically covers both the documentation website and the AutoForm package.

```shell
npm install
npm run dev
```

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

### Add Components to Project using CLI

Source: https://context7_llms

Illustrates how to add specific components to your shadcn-vue project using the 'add' command. It shows the command structure and an example of selecting components from a list.

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

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

### Removing Embla Carousel Event Listener (SolidJS)

Source: https://www.embla-carousel.com/api/events

Provides an example of removing an event listener for 'slidesInView' in a SolidJS application using 'embla-carousel-solid'. The `onMount` lifecycle hook attaches the listener, and `emblaApi()` is called to get the current API instance before using the `off` method with the specific callback.

```javascript
import { onMount } from 'solid-js'
import createEmblaCarousel from 'embla-carousel-solid'

export function EmblaCarousel() {
  const [emblaRef, emblaApi] = createEmblaCarousel()

  function logSlidesInViewOnce(emblaApi) {
    console.log(emblaApi.slidesInView())
    emblaApi.off('slidesInView', logSlidesInViewOnce)
  }

  onMount(() => {
    const api = emblaApi()
    if (api)
      api.on('slidesInView', logSlidesInViewOnce)
  })

  // ...
```

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

### Install shadcn/vue Input Component

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

Install the Input component for shadcn/vue using the pnpm command-line interface. This command fetches and adds the necessary component files to your project.

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

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

### Importing Multiple Components in Vue

Source: https://vuejs.org/api/sfc-script-setup.html

Demonstrates how to import multiple components exported from a single file in Vue using the namespace import syntax. This is useful for organizing and importing related components efficiently.

```vue
import * as Form from './form-components'
```

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

### Install shadcn-vue Table Component

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

Installs the shadcn-vue table component and its dependency, @tanstack/vue-table, using pnpm. Ensure you have pnpm or your preferred package manager (npm, yarn) installed.

```bash
pnpm dlx shadcn-vue@latest add table
pnpm add @tanstack/vue-table
```

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

### Install Zod using npm

Source: https://zod.dev/

This command installs the Zod library using npm, making it available for use in your Node.js or browser projects. Ensure you have Node.js and npm installed.

```bash
npm install zod
```

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

### Vue Input Group Button Examples

Source: https://context7_llms

Provides examples of using the InputGroupButton component with different sizes and variants. It also shows an example of an icon-only button for specific actions like copying.

```vue
<template>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton size="icon-xs" aria-label="Copy">
    <CopyIcon />
  </InputGroupButton>
</template>
```

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

### Bash Command for shadcn-vue Donut Chart Installation

Source: https://context7_llms

Command to install the donut chart component using the shadcn-vue CLI. This command should be run in your project's terminal. It assumes you have npx and shadcn-vue installed.

```bash
npx shadcn-vue@latest add chart-donut

```

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

### Install Vue Sonner with pnpm

Source: https://vue-sonner.vercel.app/

This snippet shows how to install the Vue Sonner package using the pnpm package manager. Ensure you have pnpm installed to run this command.

```bash
pnpm install vue-sonner
```

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

### Run Nuxt Prepare Command

Source: https://context7_llms

A bash command to run when initiating a new Nuxt project. This command generates the necessary .nuxt folder for the Nuxt build process.

```bash
npx nuxi prepare
```

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

### Install Progress Component

Source: https://context7_llms

Bash command to install the Progress component for shadcn-vue.

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

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

### Install shadcn/vue Resizable Component

Source: https://www.shadcn-vue.com/docs/components/resizable.html

Instructions for installing the shadcn/vue Resizable component using the pnpm package manager. This command adds the necessary component to your project.

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

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

### Install Popover Component

Source: https://context7_llms

Bash command to install the Popover component for shadcn-vue.

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

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

### Install Pagination Component

Source: https://context7_llms

Bash command to install the Pagination component for shadcn-vue.

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

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

### Registry JSON Schema Example - Full

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

An example of a complete `registry.json` file, demonstrating the structure for defining a custom component registry, including the root properties and a sample registry item.

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