shadcn-svelte

https://www.shadcn-svelte.com/docs
Admin
shadcn-svelte is a community-led Svelte port of shadcn/ui providing re-usable, customizable...
Tokens:240,574
Snippets:1,791
Trust Score:8.8
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Configure Astro project prompts

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

Example of the prompts and answers when configuring a new Astro project. Choose a starter template or Empty, install dependencies, and optionally initialize a git repository.

```bash
- Where should we create your new project?
./your-app-name
- How would you like to start your new project?
Choose a starter template (or Empty)
- Install dependencies?
Yes
- Initialize a new git repository? (optional)
Yes/No
```

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

### Installation with bun

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

Install the Toggle component using bun.

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

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

### Installation with bun

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

Installs the alert component using bun.

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

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

### Installation with bun

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

Install the separator component using bun.

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

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

### Installation with npx

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

Install the Toggle component using npx.

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

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

### Installation with bun

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

Installs the aspect-ratio component using bun.

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

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

### Install Select with bun

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

Install the Select component using bun.

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

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

### Installation with bun

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

Install the radio-group component using bun.

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

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

### Installation with npx

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

Installs the alert component using npx.

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

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

### Installation with pnpm

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

Install the Toggle component using pnpm.

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

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

### Installation with npx

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

Installs the aspect-ratio component using npx.

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

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

### Install Select with npx

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

Install the Select component using npx.

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

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

### Installation with pnpm

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

Installs the aspect-ratio component using pnpm.

```bash
pnpm dlx shadcn-svelte@latest add aspect-ratio
```

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

### Install Menubar with bun

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

Install the Menubar component using bun.

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

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

### Installation with pnpm

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

Installs the alert component using pnpm.

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

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

### Installation with npx

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

Install the separator component using npx.

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

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

### Installation with pnpm

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

Install the separator component using pnpm.

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

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

### Install Textarea with bun

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

Install the Textarea component using bun.

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

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

### Install Select with pnpm

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

Install the Select component using pnpm.

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

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

### Installation: bun

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

Installs the range-calendar component using bun.

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

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

### Install Menubar with npx

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

Install the Menubar component using npx.

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

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

### Install mode-watcher with bun

Source: https://www.shadcn-svelte.com/docs/dark-mode/svelte

Install the mode-watcher package using bun.

```bash
bun install mode-watcher
```

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

### Install Sidebar with bun

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

Install the sidebar component using bun.

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

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

### Install Sheet with bun

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

Installs the Sheet component using bun.

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

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

### Install @tanstack/svelte-table

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

Install the TanStack Table dependency for Svelte. This guide uses TanStack Table v9.

```bash
pnpm i @tanstack/svelte-table
```

```bash
npm i @tanstack/svelte-table
```

```bash
bun install @tanstack/svelte-table
```

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

### Bar chart with legend and full setup

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

Complete example of a bar chart with the `legend` prop enabled, including the script setup with `chartData` and `chartConfig`. Uses `scaleBand` from d3-scale and `BarChart` from layerchart.

```svelte
<script lang="ts">
  import { scaleBand } from "d3-scale";
  import { BarChart } from "layerchart";
  import * as Chart from "$lib/components/ui/chart/index.js";
  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 }
 ];
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb"
    },
    mobile: {
      label: "Mobile",
      color: "#60a5fa"
    }
  } satisfies Chart.ChartConfig;
</script>
<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
  <BarChart
    data={chartData}
    xScale={scaleBand().padding(0.25)}
    x="month"
    axis="x"
    seriesLayout="group"
    legend
    series={[
      {
        key: "desktop",
        label: chartConfig.desktop.label,
        color: chartConfig.desktop.color
      },
      {
        key: "mobile",
        label: chartConfig.mobile.label,
        color: chartConfig.mobile.color
      }
   ]}
  >
    {#snippet tooltip()}
      <Chart.Tooltip />
    {/snippet}
  </BarChart>
</Chart.Container>
```

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

### init prompts for components.json configuration

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

Example prompts shown during init to configure components.json. The global CSS file will be overwritten.

```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/registry add-on with sv

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

Install the @shadcn-svelte/registry community add-on for sv to scaffold a SvelteKit-ready registry authoring setup. Choose the command matching your package manager (pnpm, npm, or bun).

```bash
pnpm dlx sv add @shadcn-svelte/registry
```

```bash
npx sv add @shadcn-svelte/registry
```

```bash
bun x sv add @shadcn-svelte/registry
```

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

### aliases property example

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

Defines aliases that match internal import paths, which are transformed when users install components.

```json
{
  "aliases": {
    "lib": "@/lib", // Matches your internal imports
    "ui": "@/lib/registry/ui", // Matches your internal imports
    "components": "@/lib/registry/components", // Matches your internal imports
    "utils": "@/lib/utils", // Matches your internal imports
    "hooks": "@/lib/hooks" // Matches your internal imports
  }
}
```

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

### Navigation menu with dropdown sections and icons

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

A complete Svelte component that builds a navigation menu with three dropdown sections (Getting started, Components, With Icon) and a direct Docs link. It defines a reusable ListItem snippet for rendering links with title and description, and uses NavigationMenu.Root, List, Item, Trigger, Content, and Link from the shadcn-svelte UI library. The example imports icons from @lucide/svelte and the navigationMenuTriggerStyle function for the Docs link.

```svelte
<script lang="ts">
  import CircleAlertIcon from "@lucide/svelte/icons/circle-alert";
  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
  import CircleDashedIcon from "@lucide/svelte/icons/circle-dashed";
  import * as NavigationMenu from "$lib/components/ui/navigation-menu/index.js";
  import { navigationMenuTriggerStyle } from "$lib/components/ui/navigation-menu/navigation-menu-trigger.svelte";
  const components: { title: string; href: string; description: string }[] = [
    {
      title: "Alert Dialog",
      href: "/docs/components/alert-dialog",
      description:
        "A modal dialog that interrupts the user with important content and expects a response."
    },
    {
      title: "Hover Card",
      href: "/docs/components/hover-card",
      description:
        "For sighted users to preview content available behind a link."
    },
    {
      title: "Progress",
      href: "/docs/components/progress",
      description:
        "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar."
    },
    {
      title: "Scroll-area",
      href: "/docs/components/scroll-area",
      description: "Visually or semantically separates content."
    },
    {
      title: "Tabs",
      href: "/docs/components/tabs",
      description:
        "A set of layered sections of contentknown as tab panelsthat are displayed one at a time."
    },
    {
      title: "Tooltip",
      href: "/docs/components/tooltip",
      description:
        "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
    }
 ];
</script>
{#snippet ListItem({
  title,
  content,
  href
}: {
  title: string;
  content: string;
  href: string;
})}
  <li>
    <NavigationMenu.Link {href}>
      <div class="flex flex-col gap-1 text-sm">
        <div class="leading-none font-medium">{title}</div>
        <div class="line-clamp-2 text-muted-foreground">{content}</div>
      </div>
    </NavigationMenu.Link>
  </li>
{/snippet}
<NavigationMenu.Root>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger>Getting started</NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <ul class="w-96">
          {@render ListItem({
            href: "/docs",
            title: "Introduction",
            content: "Re-usable components built with Tailwind CSS."
          })}
          {@render ListItem({
            href: "/docs/installation",
            title: "Installation",
            content: "How to install dependencies and structure your app."
          })}
          {@render ListItem({
            href: "/docs/components/typography",
            title: "Typography",
            content: "Styles for headings, paragraphs, lists...etc"
          })}
        </ul>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
    <NavigationMenu.Item class="hidden md:flex">
      <NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <ul
          class="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]"
        >
          {#each components as component (component.title)}
            {@render ListItem({
              href: component.href,
              title: component.title,
              content: component.description
            })}
          {/each}
        </ul>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger>With Icon</NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <ul class="grid w-[200px]">
          <li>
            <NavigationMenu.Link href="##" class="flex-row items-center gap-2">
              <CircleAlertIcon />
              Backlog
            </NavigationMenu.Link>
            <NavigationMenu.Link href="##" class="flex-row items-center gap-2">
              <CircleDashedIcon />
              To Do
            </NavigationMenu.Link>
            <NavigationMenu.Link href="##" class="flex-row items-center gap-2">
              <CircleCheckIcon />
              Done
            </NavigationMenu.Link>
          </li>
        </ul>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
    <NavigationMenu.Item>
      <NavigationMenu.Link href="/docs" class={navigationMenuTriggerStyle()}>
        Docs
      </NavigationMenu.Link>
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu.Root>
```

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

### shadcn-svelte init command options

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

CLI help output for the init command, listing all available options such as --preset, --cwd, --base-color, and import alias flags.

```bash
Usage: shadcn-svelte init [options]
initialize your project and install dependencies
Options:
  --preset <preset>          the preset to use
  -c, --cwd <path>           the working directory
  --no-deps-install          add dependencies to package.json without running install
  --skip-preflight           ignore preflight checks and continue (default: false)
  --reinstall                reinstall existing components when style changes
  --no-reinstall             skip reinstalling existing components when style changes
  --base-color <name>        the base color for the components (choices: "neutral", "stone", "zinc", "mauve", "olive", "mist", "taupe")
  --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
```

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

### Basic Input with placeholder

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

Basic usage of the Input component with a placeholder attribute. This example shows the minimal setup for a text input.

```svelte
<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
</script>
<Input placeholder="Enter text" />
```

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

### Minimal scroll-fade-b usage

Source: https://www.shadcn-svelte.com/docs/utils/scroll-fade

A minimal example showing the scroll-fade-b utility applied to a scrollable div. Use this as a starting point for adding edge fades to your own containers.

```svelte
<div class="scroll-fade-b overflow-y-auto"></div>
```

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

### Install context-menu with bun

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

Install the context menu component using bun.

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

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

### Invalid Select with Field and Trigger Attributes

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

Shows the minimal markup to display an error state: add `data-invalid` to `Field.Field` and `aria-invalid` to `Select.Trigger`. This snippet is a partial example without the full script and root setup.

```svelte
<Field.Field data-invalid>
  <Field.Label>Fruit</Field.Label>
  <Select.Trigger aria-invalid>
    <Select.Value />
  </Select.Trigger>
</Field.Field>
```

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

### Carousel options with opts prop

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

Example of passing options to the carousel via the `opts` prop. Here `align` is set to "start" and `loop` to `true`; see the Embla Carousel docs for all available options.

```svelte
<Carousel.Root
  opts={{
    align: "start",
    loop: true,
  }}
>
  <Carousel.Content>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

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

### Install dropdown-menu with bun

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

Install the dropdown-menu component using bun.

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

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

### Vertical carousel with orientation prop

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

Full example of a vertical carousel using the `orientation` prop. It imports the Card and Carousel components, sets `opts.align` to "start", and renders five items with previous/next controls.

```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-[270px]">
    {#each Array(5) as _, i (i)}
      <Carousel.Item class="basis-1/2 pt-1">
        <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>
```

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

### Installation Commands

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

Install the alert-dialog component using your preferred package manager. Run one of these commands in your project root.

```bash
pnpm dlx shadcn-svelte@latest add alert-dialog
```

```bash
npx shadcn-svelte@latest add alert-dialog
```

```bash
bun x shadcn-svelte@latest add alert-dialog
```

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

### Complex registry item with multiple files

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

Example of a complex registry item that installs a page, two components, a hook, a format-date utility, and a config file. The `files` array lists each file with its path and type, and optionally a `target` for files that need to be placed elsewhere.

```json
{
  "$schema": "https://shadcn-svelte.com/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "A complex hello world component",
  "files": [
    {
      "path": "registry/hello-world/page.svelte",
      "type": "registry:page",
      "target": "src/routes/hello/+page.svelte"
    },
    {
      "path": "registry/hello-world/components/hello-world.svelte",
      "type": "registry:component"
    },
    {
      "path": "registry/hello-world/components/formatted-message.svelte",
      "type": "registry:component"
    },
    {
      "path": "registry/hello-world/hooks/use-hello.svelte.ts",
      "type": "registry:hook"
    },
    {
      "path": "registry/hello-world/lib/format-date.ts",
      "type": "registry:utils"
    },
    {
      "path": "registry/hello-world/hello.config.ts",
      "type": "registry:file",
      "target": "hello.config.ts"
    }
 ]
}
```

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

### Basic: Date picker with Field wrapper

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

Basic date picker example from the Basic section. Wraps the Popover and Calendar inside a Field.Field with a Field.Label for accessibility. Uses a simpler trigger button without an icon and sets align="start" on the Popover.Content.

```svelte
<script lang="ts">
  import {
    DateFormatter,
    type DateValue,
    getLocalTimeZone
  } from "@internationalized/date";
  import * as Field from "$lib/components/ui/field/index.js";
  import * as Popover from "$lib/components/ui/popover/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import { Calendar } from "$lib/components/ui/calendar/index.js";
  const df = new DateFormatter("en-US", {
    dateStyle: "long"
  });
  let value = $state<DateValue | undefined>();
</script>
<Field.Field class="mx-auto w-44">
  <Field.Label for="date-picker-simple">Date</Field.Label>
  <Popover.Root>
    <Popover.Trigger id="date-picker-simple">
      {#snippet child({ props })}
        <Button {...props} variant="outline" class="justify-start font-normal">
          {value ? df.format(value.toDate(getLocalTimeZone())) : "Pick a date"}
        </Button>
      {/snippet}
    </Popover.Trigger>
    <Popover.Content class="w-auto p-0" align="start">
      <Calendar type="single" bind:value />
    </Popover.Content>
  </Popover.Root>
</Field.Field>
```

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

### Spinner in Badge with data-icon

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

Add a spinner to a badge to indicate a loading state. Place the `<Spinner />` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position. This example shows three badges with inline-start spinners.

```svelte
<script lang="ts">
  import { Badge } from "$lib/components/ui/badge/index.js";
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
<div class="flex items-center gap-4 [--radius:1.2rem]">
  <Badge>
    <Spinner data-icon="inline-start" />
    Syncing
  </Badge>
  <Badge variant="secondary">
    <Spinner data-icon="inline-start" />
    Updating
  </Badge>
  <Badge variant="outline">
    <Spinner data-icon="inline-start" />
    Processing
  </Badge>
</div>
```

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

### RTL scroll-fade-x Svelte example

Source: https://www.shadcn-svelte.com/docs/utils/scroll-fade

Use this Svelte component to apply the scroll-fade-x utility in an RTL layout. The container has dir="rtl" and the scrollable area uses the no-scrollbar and scroll-fade-x classes. The start edge (right in RTL) is crisp, and the end edge (left) fades.

```svelte
<script lang="ts">
  const tags = [
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    ""
 ];
</script>
<div
  class="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border"
  dir="rtl"
>
  <div class="no-scrollbar scroll-fade-x overflow-x-auto">
    <div class="flex w-max gap-1.5 p-1.5">
      {#each tags as tag (tag)}
        <div class="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm">
          {tag}
        </div>
      {/each}
    </div>
  </div>
</div>
```

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

### Install Kbd with bun

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

Install the Kbd component using bun.

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

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

### Spinner in Button with data-icon

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

Add a spinner to a button to indicate a loading state. Place the `<Spinner />` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position. This example shows three disabled buttons with inline-start spinners.

```svelte
<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
<div class="flex flex-col items-center gap-4">
  <Button disabled size="sm">
    <Spinner data-icon="inline-start" />
    Loading...
  </Button>
  <Button variant="outline" disabled size="sm">
    <Spinner data-icon="inline-start" />
    Please wait
  </Button>
  <Button variant="secondary" disabled size="sm">
    <Spinner data-icon="inline-start" />
    Processing
  </Button>
</div>
```

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

### Set item sizes with basis utility

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

Sets the size of carousel items using the `basis` utility class on `<Carousel.Item />`. The example uses `basis-1/2 lg:basis-1/3` to make items half-width on small screens and one-third on large screens, with `opts.align` set to `"start"`.

```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"
  }}
  class="w-full max-w-[12rem] sm:max-w-xs md:max-w-sm"
>
  <Carousel.Content>
    {#each Array(5) as _, i (i)}
      <Carousel.Item class="basis-1/2 lg:basis-1/3">
        <div class="p-1">
          <Card.Root>
            <Card.Content
              class="flex aspect-square 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>
```

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

### Install chart with bun

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

Installs the chart component using bun.

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

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

### Message.Avatar with align="end"

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

Renders a message with an avatar. Set align="end" on Message.Root to align the avatar to the end of the message. The example shows two messages: the first uses the default start alignment, the second uses align="end". The avatar uses Avatar.Root with an image and fallback.

```svelte
<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
  import * as Bubble from "$lib/components/ui/bubble/index.js";
  import * as Message from "$lib/components/ui/message/index.js";
</script>
<div class="flex w-full max-w-sm flex-col gap-6 py-12">
  <Message.Root>
    <Message.Avatar>
      <Avatar.Root>
        <Avatar.Image src="/avatars/03.png" alt="@avatar" />
        <Avatar.Fallback>R</Avatar.Fallback>
      </Avatar.Root>
    </Message.Avatar>
    <Message.Content>
      <Bubble.Root variant="muted">
        <Bubble.Content
          >The build failed during dependency installation.</Bubble.Content
        >
      </Bubble.Root>
    </Message.Content>
  </Message.Root>
  <Message.Root align="end">
    <Message.Avatar>
      <Avatar.Root>
        <Avatar.Image src="/avatars/10.png" alt="@avatar" />
        <Avatar.Fallback>R</Avatar.Fallback>
      </Avatar.Root>
    </Message.Avatar>
    <Message.Content>
      <Bubble.Root>
        <Bubble.Content>Can you share the exact error?</Bubble.Content>
      </Bubble.Root>
    </Message.Content>
  </Message.Root>
  <Message.Root>
    <Message.Avatar>
      <Avatar.Root>
        <Avatar.Image src="/avatars/03.png" alt="@avatar" />
        <Avatar.Fallback>R</Avatar.Fallback>
      </Avatar.Root>
    </Message.Avatar>
    <Message.Content>
      <Bubble.Group>
        <Bubble.Root variant="muted">
          <Bubble.Content>Here's the error from the logs</Bubble.Content>
        </Bubble.Root>
        <Bubble.Root variant="muted">
          <Bubble.Content>
            Something went wrong with the build. The libraries are not installed
            correctly. Try running the build again.
          </Bubble.Content>
        </Bubble.Root>
      </Bubble.Group>
    </Message.Content>
  </Message.Root>
</div>
```

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

### Get carousel API with setApi and track slide count

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

Use the `setApi` prop on `Carousel.Root` to capture the Embla carousel API instance. The first example includes a full card layout and a slide counter; the second is a minimal version with placeholder items. Both use `$state`, `$derived`, and `$effect` to track the current slide and total count.

```svelte
<script lang="ts">
  import * as Card from "$lib/components/ui/card/index.js";
  import * as Carousel from "$lib/components/ui/carousel/index.js";
  import type { CarouselAPI } from "$lib/components/ui/carousel/context.js";
  let api = $state<CarouselAPI>();
  const count = $derived(api ? api.scrollSnapList().length : 0);
  let current = $state(0);
  $effect(() => {
    if (api) {
      current = api.selectedScrollSnap() + 1;
      api.on("select", () => {
        current = api!.selectedScrollSnap() + 1;
      });
    }
  });
</script>
<div class="mx-auto max-w-[10rem] sm:max-w-xs">
  <Carousel.Root
    setApi={(emblaApi) => (api = emblaApi)}
    class="w-full max-w-xs"
  >
    <Carousel.Content>
      {#each Array(5) as _, i (i)}
        <Carousel.Item>
          <Card.Root class="m-px">
            <Card.Content
              class="flex aspect-square items-center justify-center p-6"
            >
              <span class="text-4xl font-semibold">{i + 1}</span>
            </Card.Content>
          </Card.Root>
        </Carousel.Item>
      {/each}
    </Carousel.Content>
    <Carousel.Previous />
    <Carousel.Next />
  </Carousel.Root>
  <div class="py-2 text-center text-sm text-muted-foreground">
    Slide {current} of {count}
  </div>
</div>
```

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

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

### Initialize components.json with bun

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

Run this command to create a components.json file using bun. This is required only if you use the CLI to add components.

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

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

### Install context-menu with npx

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

Install the context menu component using npx.

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

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

### Install dropdown-menu with npx

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

Install the dropdown-menu component using npx.

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

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

### Installation with npx

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

Install the radio-group component using npx.

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

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

### Installation with pnpm

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

Install the radio-group component using pnpm.

```bash
pnpm dlx shadcn-svelte@latest add radio-group
```

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

### 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 Kbd with npx

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

Install the Kbd component using npx.

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

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

### Serve registry with dev server using pnpm, npm, or bun

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

Serve your registry by running the dev server. Your files will be served at http://localhost:5173/r/[NAME].json, e.g. http://localhost:5173/r/hello-world.json.

```bash
pnpm run dev
```

```bash
npm run dev
```

```bash
bun run dev
```
Tokens:
Raw