### Display Custom Documentation on Install

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

Provide a custom message to the user when the registry item is installed via the CLI using the `docs` property. This is useful for reminding users of necessary setup steps.

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

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

### Install Navigation Menu with bun

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

Install the navigation-menu component using bun.

```bash
bun x shadcn-svelte@latest add navigation-menu
```

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

### Install Native Select with bun

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

Install the native-select component using bun.

```bash
bun x shadcn-svelte@latest add native-select
```

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

### Install Sheet Component (bun)

Source: https://www.shadcn-svelte.com/docs/components/sheet

Install the Sheet component using bun.

```bash
bun x shadcn-svelte@latest add sheet
```

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

### Install Resizable Component

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

Install the Resizable component using pnpm, npx, or bun.

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

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

```bash
bun x shadcn-svelte@latest add resizable
```

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

### Install Select Component with npx

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

Install the Select component using the npx command.

```bash
npx shadcn-svelte@latest add select
```

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

### Install Navigation Menu with npx

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

Install the navigation-menu component using npx.

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

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

### Install Native Select with npx

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

Install the native-select component using npx.

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

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

### Install Input Component

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

Install the Input component using npm, pnpm, or bun.

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

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

```bash
bun x shadcn-svelte@latest add input
```

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

### Install Navigation Menu with pnpm

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

Install the navigation-menu component using pnpm.

```bash
pnpm dlx shadcn-svelte@latest add navigation-menu
```

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

### Install Command Component with bun

Source: https://www.shadcn-svelte.com/docs/components/command

Installs the Command component using bun.

```bash
bun x shadcn-svelte@latest add command
```

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

### Install Native Select with pnpm

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

Install the native-select component using pnpm.

```bash
pnpm dlx shadcn-svelte@latest add native-select
```

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

### Install Tooltip Component

Source: https://www.shadcn-svelte.com/docs/components/tooltip

Installs the tooltip component using pnpm, npx, or bun.

```bash
pnpm dlx shadcn-svelte@latest add tooltip
```

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

```bash
bun x shadcn-svelte@latest add tooltip
```

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

### Install Sheet Component (npx)

Source: https://www.shadcn-svelte.com/docs/components/sheet

Install the Sheet component using npx.

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

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

### Install Pagination with npx

Source: https://www.shadcn-svelte.com/docs/components/pagination

Installs the Pagination component using the npx command.

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

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

### Install Select Component with bun

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

Install the Select component using the bun package manager.

```bash
bun x shadcn-svelte@latest add select
```

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

### Install shadcn-svelte Skill with bun

Source: https://www.shadcn-svelte.com/docs/skills

Use this command to install the shadcn-svelte skill into your project using bun. Once installed, your AI assistant will automatically load it when working with shadcn-svelte components.

```bash
bun x skills add huntabyte/shadcn-svelte
```

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

### Install Toggle Component

Source: https://www.shadcn-svelte.com/docs/components/toggle

Install the Toggle component using pnpm, npx, or bun.

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

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

```bash
bun x shadcn-svelte@latest add toggle
```

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

### Install Progress Component with BUN

Source: https://www.shadcn-svelte.com/docs/components/progress

Installs the Progress component using the BUN runtime.

```bash
bun x shadcn-svelte@latest add progress
```

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

### Install Drawer Component

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

Install the Drawer component using pnpm, npx, or bun.

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

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

```bash
bun x shadcn-svelte@latest add drawer
```

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

### Install Popover with npx

Source: https://www.shadcn-svelte.com/docs/components/popover

Install the Popover component using the npx command.

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

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

### Install Command Component with npx

Source: https://www.shadcn-svelte.com/docs/components/command

Installs the Command component using npx.

```bash
npx shadcn-svelte@latest add command
```

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

### Install Calendar Component

Source: https://www.shadcn-svelte.com/docs/components/calendar

Instructions for installing the Calendar component using pnpm, npx, or bun.

```bash
pnpm dlx shadcn-svelte@latest add calendar
```

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

```bash
bun x shadcn-svelte@latest add calendar
```

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

### Install tw-animate-css with bun

Source: https://www.shadcn-svelte.com/docs/migration/tailwind-v4

Install the `tw-animate-css` package as a dev dependency using bun.

```bash
bun install tw-animate-css -D
```

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

### Install Toggle Group with bun

Source: https://www.shadcn-svelte.com/docs/components/toggle-group

Installs the Toggle Group component using bun.

```bash
bun x shadcn-svelte@latest add toggle-group
```

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

### Install Pagination with bun

Source: https://www.shadcn-svelte.com/docs/components/pagination

Installs the Pagination component using the bun package manager.

```bash
bun x shadcn-svelte@latest add pagination
```

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

### Install Toggle Group with npx

Source: https://www.shadcn-svelte.com/docs/components/toggle-group

Installs the Toggle Group component using npx.

```bash
npx shadcn-svelte@latest add toggle-group
```

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

### Install Select Component with pnpm

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

Install the Select component using the pnpm package manager.

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

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

### Install Progress Component with NPX

Source: https://www.shadcn-svelte.com/docs/components/progress

Installs the Progress component using the NPX command.

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

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

### Install Label Component

Source: https://www.shadcn-svelte.com/docs/components/label

Install the Label component using pnpm, npx, or bun.

```bash
pnpm dlx shadcn-svelte@latest add label
```

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

```bash
bun x shadcn-svelte@latest add label
```

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

### Install Popover with bun

Source: https://www.shadcn-svelte.com/docs/components/popover

Install the Popover component using the bun package manager.

```bash
bun x shadcn-svelte@latest add popover
```

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

### Install Accordion with bun

Source: https://www.shadcn-svelte.com/docs/components/accordion

Installs the Accordion component using the bun package manager.

```bash
bun x shadcn-svelte@latest add accordion
```

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

### Basic Menubar Setup

Source: https://www.shadcn-svelte.com/docs/components/menubar

Import the Menubar components from '$lib/components/ui/menubar/index.js' to begin using the Menubar.

```svelte
<script lang="ts">
  import * as Menubar from "$lib/components/ui/menubar/index.js";
</script>
```

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

### Carousel API Setup Placeholder

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

A minimal example showing the setup for binding the carousel API using `setApi`. This is useful for initializing API-dependent logic.

```svelte
<script lang="ts">
  import { type CarouselAPI } from "$lib/components/ui/carousel/context.js";
  import * as Carousel from "$lib/components/ui/carousel/index.js";
  let api = $state<CarouselAPI>();
  let current = $state(0);
  const count = $derived(api ? api.scrollSnapList().length : 0);
  $effect(() => {
    if (api) {
      current = api.selectedScrollSnap() + 1;
      api.on("select", () => {
        current = api!.selectedScrollSnap() + 1;
      });
    }
  });
</script>
<Carousel.Root setApi={(emblaApi) => (api = emblaApi)}>
  <Carousel.Content>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

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

### Run the development server

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

Starts the development server to serve your registry files locally. Your registry will be accessible at `http://localhost:5173/r/[NAME].json`.

```bash
pnpm run dev
```

```bash
npm run dev
```

```bash
bun run dev
```

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

### Initialize shadcn-svelte Project

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

Use the `init` command to set up your project with shadcn-svelte. It installs dependencies, adds the `cn` utility, and configures CSS variables. You will be prompted to answer configuration questions.

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

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

```bash
bun x shadcn-svelte@latest init
```

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

### Avatar Component Examples

Source: https://www.shadcn-svelte.com/docs/components/avatar

Demonstrates different ways to use the Avatar component, including a basic setup, a rounded variant, and a stacked display with styling.

```svelte
<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</script>
<div class="flex flex-row flex-wrap items-center gap-12">
  <Avatar.Root>
    <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
    <Avatar.Fallback>CN</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root class="rounded-lg">
    <Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <Avatar.Fallback>ER</Avatar.Fallback>
  </Avatar.Root>
  <div
    class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
  >
    <Avatar.Root>
      <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
      <Avatar.Fallback>CN</Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root>
      <Avatar.Image src="https://github.com/leerob.png" alt="@leerob" />
      <Avatar.Fallback>LR</Avatar.Fallback>
    </Avatar.Root>
    <Avatar.Root>
      <Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
      <Avatar.Fallback>ER</Avatar.Fallback>
    </Avatar.Root>
  </div>
</div>
```

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

### Vertical Carousel Example

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

Demonstrates how to configure a carousel to display vertically using the `orientation` prop. Includes basic setup with imported components and a loop of items.

```svelte
<script lang="ts">
  import * as Card from "$lib/components/ui/card/index.js";
  import * as Carousel from "$lib/components/ui/carousel/index.js";
</script>
<Carousel.Root
  opts={{
    align: "start"
  }}
  orientation="vertical"
  class="w-full max-w-xs"
>
  <Carousel.Content class="-mt-1 h-[200px]">
    {#each Array(5) as _, i (i)}
      <Carousel.Item class="pt-1 md:basis-1/2">
        <div class="p-1">
          <Card.Root>
            <Card.Content class="flex items-center justify-center p-6">
              <span class="text-3xl font-semibold">{i + 1}</span>
            </Card.Content>
          </Card.Root>
        </div>
      </Carousel.Item>
    {/each}
  </Carousel.Content>
  <Carousel.Previous />
  <Carousel.Next />
</Carousel.Root>
```

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

### Basic Command Menu with Icons and Shortcuts

Source: https://www.shadcn-svelte.com/docs/components/command

A comprehensive example demonstrating a command menu with suggestions and settings groups. It includes icons for items and shortcuts for settings.

```svelte
<script lang="ts">
  import CalculatorIcon from "@lucide/svelte/icons/calculator";
  import CalendarIcon from "@lucide/svelte/icons/calendar";
  import CreditCardIcon from "@lucide/svelte/icons/credit-card";
  import SettingsIcon from "@lucide/svelte/icons/settings";
  import SmileIcon from "@lucide/svelte/icons/smile";
  import UserIcon from "@lucide/svelte/icons/user";
  import * as Command from "$lib/components/ui/command/index.js";
</script>
<Command.Root class="rounded-lg border shadow-md md:min-w-[450px]">
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>
        <CalendarIcon />
        <span>Calendar</span>
      </Command.Item>
      <Command.Item>
        <SmileIcon />
        <span>Search Emoji</span>
      </Command.Item>
      <Command.Item disabled>
        <CalculatorIcon />
        <span>Calculator</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>
        <UserIcon />
        <span>Profile</span>
        <Command.Shortcut>P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <CreditCardIcon />
        <span>Billing</span>
        <Command.Shortcut>B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <SettingsIcon />
        <span>Settings</span>
        <Command.Shortcut>S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>
```

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

### Basic Usage Setup

Source: https://www.shadcn-svelte.com/docs/components/empty

Importing the necessary components for basic usage of the Empty component.

```svelte
<script lang="ts">
  import * as Empty from "$lib/components/ui/empty/index.js";
  import FolderCodeIcon from "@tabler/icons-svelte/icons/folder-code";
</script>
```

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

### Advanced Collapsible with Icons and Button Variants

Source: https://www.shadcn-svelte.com/docs/components/collapsible

An example demonstrating a more complex Collapsible component setup, including icons and styled buttons for the trigger. This is suitable for interactive elements within a larger UI.

```svelte
<script lang="ts">
  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
  import * as Collapsible from "$lib/components/ui/collapsible/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>
<Collapsible.Root class="w-[350px] space-y-2">
  <div class="flex items-center justify-between space-x-4 px-4">
    <h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
    <Collapsible.Trigger
      class={buttonVariants({ variant: "ghost", size: "sm", class: "w-9 p-0" })}
    >
      <ChevronsUpDownIcon />
      <span class="sr-only">Toggle</span>
    </Collapsible.Trigger>
  </div>
  <div class="rounded-md border px-4 py-3 font-mono text-sm">
    @huntabyte/bits-ui
  </div>
  <Collapsible.Content class="space-y-2">
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
      @melt-ui/melt-ui
    </div>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
      @sveltejs/svelte
    </div>
  </Collapsible.Content>
</Collapsible.Root>
```

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

### Install Collapsible with pnpm

Source: https://www.shadcn-svelte.com/docs/components/collapsible

Use this command to install the Collapsible component using pnpm. Ensure you have pnpm installed and configured for your project.

```bash
pnpm dlx shadcn-svelte@latest add collapsible
```

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

### Install Registry Item with Bun

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

Use this command to install a registry item using the shadcn-svelte CLI with Bun. Ensure you have Bun installed.

```bash
bun x shadcn-svelte@latest add http://localhost:5173/r/hello-world.json
```

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

### Basic Context Menu Setup

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

Sets up a basic context menu with a trigger and a few simple menu items. Import the necessary components from the library.

```svelte
<script lang="ts">
  import * as ContextMenu from "$lib/components/ui/context-menu/index.js";
</script>

```

```svelte
<ContextMenu.Root>
  <ContextMenu.Trigger>Right click</ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item>Profile</ContextMenu.Item>
    <ContextMenu.Item>Billing</ContextMenu.Item>
    <ContextMenu.Item>Team</ContextMenu.Item>
    <ContextMenu.Item>Subscription</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>
```

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

### Install Registry Item with PNPM

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

Use this command to install a registry item using the shadcn-svelte CLI with PNPM. Ensure you have PNPM installed.

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

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

### Install Registry Item with NPX

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

Use this command to install a registry item using the shadcn-svelte CLI with NPX. This is a common method if you have Node.js and npm installed.

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

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

### shadcn-svelte init Configuration Prompts

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

These are the interactive prompts you will see when running `shadcn-svelte init`. They guide you through configuring essential project settings like base color, global CSS path, and import aliases.

```txt
Which base color would you like to use?  Slate
Where is your global CSS file? (this file will be overwritten)  src/routes/layout.css
Configure the import alias for lib:  $lib
Configure the import alias for components:  $lib/components
Configure the import alias for utils:  $lib/utils
Configure the import alias for hooks:  $lib/hooks
Configure the import alias for ui:  $lib/components/ui
```

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

### Install shadcn-svelte Skill with npx

Source: https://www.shadcn-svelte.com/docs/skills

Use this command to install the shadcn-svelte skill into your project using npx. Once installed, your AI assistant will automatically load it when working with shadcn-svelte components.

```bash
npx skills add huntabyte/shadcn-svelte
```

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

### Install shadcn-svelte Skill with pnpm

Source: https://www.shadcn-svelte.com/docs/skills

Use this command to install the shadcn-svelte skill into your project using pnpm. Once installed, your AI assistant will automatically load it when working with shadcn-svelte components.

```bash
pnpm dlx skills add huntabyte/shadcn-svelte
```

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

### Install tailwindcss-animate

Source: https://www.shadcn-svelte.com/docs/migration/svelte-5

Install the `tailwindcss-animate` package using your preferred package manager.

```bash
pnpm i tailwindcss-animate
```

```bash
npm i tailwindcss-animate
```

```bash
bun install tailwindcss-animate
```

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

### shadcn-svelte init Command Options

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

Available options for the `shadcn-svelte init` command. These allow for customization of the initialization process, such as specifying the working directory, overwriting files, or disabling dependency installation.

```bash
Usage: shadcn-svelte init [options]
initialize your project and install dependencies
Options:
  -c, --cwd <path>           the working directory (default: the current directory)
  -o, --overwrite            overwrite existing files (default: false)
  --no-deps                  disable adding & installing dependencies
  --skip-preflight           ignore preflight checks and continue (default: false)
  --base-color <name>        the base color for the components (choices: "slate", "gray", "zinc",
                             "neutral", "stone")
  --css <path>               path to the global CSS file
  --components-alias <path>  import alias for components
  --lib-alias <path>         import alias for lib
  --utils-alias <path>       import alias for utils
  --hooks-alias <path>       import alias for hooks
  --ui-alias <path>          import alias for ui
  --proxy <proxy>            fetch items from registry using a proxy
  -h, --help                 display help for command
```

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

### Simple Menubar Example

Source: https://www.shadcn-svelte.com/docs/components/menubar

A basic Menubar with a 'File' menu containing 'New Tab', 'New Window', 'Share', and 'Print' items. This example demonstrates the fundamental structure of a Menubar.

```svelte
<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>File</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item>
        New Tab
        <Menubar.Shortcut>T</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Item>New Window</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item>Share</Menubar.Item>
      <Menubar.Separator />
      <Menubar.Item>Print</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar.Root>
```

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

### Install Context Menu Component

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

Installs the context menu component using pnpm, npx, or bun.

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

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

```bash
bun x shadcn-svelte@latest add context-menu
```

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

### Install Sheet Component (pnpm)

Source: https://www.shadcn-svelte.com/docs/components/sheet

Install the Sheet component using pnpm.

```bash
pnpm dlx shadcn-svelte@latest add sheet
```

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

### Install Icon Library

Source: https://www.shadcn-svelte.com/docs/installation/manual

Install the `@lucide/svelte` package for icon support. Use the command appropriate for your package manager.

```bash
pnpm i @lucide/svelte
```

```bash
npm i @lucide/svelte
```

```bash
bun install @lucide/svelte
```

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

### Install Aspect Ratio Component with npx

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

Install the Aspect Ratio component using the npx command.

```bash
npx shadcn-svelte@latest add aspect-ratio
```

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

### Install Checkbox with npx

Source: https://www.shadcn-svelte.com/docs/components/checkbox

Install the Checkbox component using the npx command.

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

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

### Render a Switch Component

Source: https://www.shadcn-svelte.com/docs/components/switch

A minimal example demonstrating how to render the Switch component.

```svelte
<Switch />
```

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

### Install Accordion with npx

Source: https://www.shadcn-svelte.com/docs/components/accordion

Installs the Accordion component using the npx command.

```bash
npx shadcn-svelte@latest add accordion
```

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

### Basic Command Menu Structure

Source: https://www.shadcn-svelte.com/docs/components/command

A minimal example showing the basic structure of the Command component, including input, list, empty state, groups, and items.

```svelte
<Command.Root>
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>Calendar</Command.Item>
      <Command.Item>Search Emoji</Command.Item>
      <Command.Item>Calculator</Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>Profile</Command.Item>
      <Command.Item>Billing</Command.Item>
      <Command.Item>Settings</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>
```

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

### Install tw-animate-css with npm

Source: https://www.shadcn-svelte.com/docs/migration/tailwind-v4

Install the `tw-animate-css` package as a dev dependency using npm.

```bash
npm i tw-animate-css -D
```

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

### Install tw-animate-css with pnpm

Source: https://www.shadcn-svelte.com/docs/migration/tailwind-v4

Install the `tw-animate-css` package as a dev dependency using pnpm.

```bash
pnpm i tw-animate-css -D
```

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

### Install Tabs Component with npx

Source: https://www.shadcn-svelte.com/docs/components/tabs

Installs the Tabs component using the npx command.

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

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

### Install Aspect Ratio Component with bun

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

Install the Aspect Ratio component using the bun package manager.

```bash
bun x shadcn-svelte@latest add aspect-ratio
```

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

### Basic Select Usage

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

A minimal example demonstrating the basic structure for using the Select component. It includes importing the necessary components and setting up the root, trigger, and content elements.

```svelte
<script lang="ts">
  import * as Select from "$lib/components/ui/select/index.js";
</script>
```

```svelte
<Select.Root type="single">
  <Select.Trigger class="w-[180px]"></Select.Trigger>
  <Select.Content>
    <Select.Item value="light">Light</Select.Item>
    <Select.Item value="dark">Dark</Select.Item>
    <Select.Item value="system">System</Select.Item>
  </Select.Content>
</Select.Root>
```

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

### Install Slider Component

Source: https://www.shadcn-svelte.com/docs/components/slider

Install the Slider component using pnpm, npx, or bun.

```bash
pnpm dlx shadcn-svelte@latest add slider
```

```bash
npx shadcn-svelte@latest add slider
```

```bash
bun x shadcn-svelte@latest add slider
```

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

### Basic Chart Setup with LayerChart

Source: https://www.shadcn-svelte.com/docs/components/chart

Demonstrates the fundamental structure for using the Chart component with LayerChart, including data and tooltip integration.

```svelte
<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js";
  import { BarChart } from "layerchart";
  const data = [
    // ...
 ];
</script>
<Chart.Container>
  <BarChart {data} x="date" y="value">
    {#snippet tooltip()}
      <Chart.Tooltip />
    {/snippet}
  </BarChart>
</Chart.Container>
```

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

### Install Spinner Component

Source: https://www.shadcn-svelte.com/docs/components/spinner

Install the Spinner component using your preferred package manager.

```bash
pnpm dlx shadcn-svelte@latest add spinner
```

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

```bash
bun x shadcn-svelte@latest add spinner
```

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

### Install Hover Card with bun

Source: https://www.shadcn-svelte.com/docs/components/hover-card

Installs the Hover Card component using the bun package runner.

```bash
bun x shadcn-svelte@latest add hover-card
```