Shadcn Svelte

https://github.com/zippoxer/shadcn-svelte-next
Admin
shadcn/ui, but for Svelte. ✨
Tokens:39,370
Snippets:268
Trust Score:8.3
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Outlining Manual Installation Steps (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/menubar.md

This Svelte snippet structures the manual installation guide using `<Steps>` and `<Step>` components. It includes an instruction to install the `bits-ui` dependency using the `<PMInstall>` helper and directs the user to copy component source files.

```Svelte
<Steps>
<Step>

Install `bits-ui`:

</Step>
<PMInstall command="bits-ui -D" />
<Step>Copy and paste the component source files linked at the top of this page into your project.</Step>
</Steps>
```

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

### Example: Adding Alert Dialog Component (bash)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/packages/cli/README.md

This command is an example demonstrating how to use the `add` command to install a specific component. It adds the `alert-dialog` component to the project, along with its necessary dependencies.

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

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

### Initializing shadcn-svelte Project (bash)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/packages/cli/README.md

This command initializes a new shadcn-svelte project. It installs dependencies, adds utility functions like 'cn', configures 'tailwind.config.cjs', and sets up CSS variables for the project. It should be run once at the beginning of a new project.

```bash
npx shadcn-svelte init
```

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

### Initializing shadcn-svelte CLI Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/sveltekit.md

This command executes the init command of the shadcn-svelte CLI tool (using the next version). It starts the interactive configuration process for shadcn-svelte, prompting the user to define project paths, styles, and aliases.

```shell
shadcn-svelte@next init
```

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

### Importing Documentation Components (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/migration/svelte-5/index.md

Imports helper components like `Steps`, `PMExecute`, `PMInstall`, and `PMRemove` from a local library. These components are used within the Markdown content to render interactive elements like step-by-step guides and package manager command examples.

```svelte
import { Steps, PMExecute, PMInstall, PMRemove } from "$lib/components/docs";
```

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

### Displaying Manual Installation Steps (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/calendar.md

This Svelte snippet structures the manual installation instructions using documentation components like <Steps> and <Step>. It includes a <PMInstall> component which renders the necessary package manager command to install the Calendar component's dependencies.

```svelte
<Steps>
<Step>

Install `bits-ui` and `@internationalized/date`:

</Step>
<PMInstall command="bits-ui @internationalized/date -D" />
<Step> Copy and paste the component source files linked at the top of this page into your project. </Step>
</Steps>
```

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

### Manual Pagination Install Steps (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/pagination.md

Svelte component code outlining the steps for manual installation of the pagination component. It includes rendering instructions to install the required 'bits-ui' library using a package manager command via the `<PMInstall>` component, and notes the need to manually copy source files.

```svelte
<Steps>
<Step>

Install \`bits-ui\`:

</Step>
<PMInstall command="bits-ui -D" />
<Step>Copy and paste the component source files linked at the top of this page into your project.</Step>
</Steps>
```

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

### Installing bits-ui Dependency (CLI Helper) - Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/aspect-ratio.md

Uses a helper component (`PMInstall`) to display the command for installing the `bits-ui` dependency. This component typically renders the correct package manager install command (e.g., `npm install bits-ui -D`, `pnpm add bits-ui -D`) based on the user's setup.

```Svelte
<PMInstall command="bits-ui -D" />
```

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

### Install Tabs Component via CLI - Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/tabs.md

Installs the Tabs component using the shadcn-svelte command-line interface tool. This is the recommended and easiest installation method. Requires the shadcn-svelte CLI tool to be installed and configured. No explicit parameters or inputs needed; success adds component files to the project.

```Shell
npx shadcn-svelte add tabs
```

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

### Adding shadcn-svelte Component (bash)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/packages/cli/README.md

This command adds a specified shadcn-svelte component to your project. It automatically handles installing any required dependencies for the component. Replace `[component]` with the desired component name.

```bash
npx shadcn-svelte add [component]
```

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

### Install bits-ui Dependency Manual Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/tooltip.md

Uses a Svelte component call within a template snippet to represent the package manager command for installing the required 'bits-ui' dependency. The '-D' flag indicates it should be installed as a development dependency, necessary for manual component setup.

```Svelte
<PMInstall command="bits-ui -D" />
```

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

### Install bits-ui Dependency Manually Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/alert-dialog.md

This snippet shows the Svelte markup used within the documentation to render manual installation steps, specifically demonstrating the installation of the required `bits-ui` dependency using a helper component. This represents commands like `npm install bits-ui -D`.

```svelte
<Steps>
<Step>

Install `bits-ui`:

</Step>
<PMInstall command="bits-ui -D" />
<Step>Copy and paste the component source files linked at the top of this page into your project.</Step>
</Steps>
```

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

### Install bits-ui Dependency - Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/separator.md

Install the required 'bits-ui' package as a development dependency using your preferred package manager (npm, pnpm, or yarn). This is a necessary step for manual installation and corresponds to the documentation's install command presented using a Svelte component (`<PMInstall />`).

```shell
npm install bits-ui -D
```

```shell
pnpm add bits-ui -D
```

```shell
yarn add bits-ui -D
```

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

### Manual Installation Steps for Avatar (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/avatar.md

This Svelte snippet outlines the manual process for installing the Avatar component, including installing the 'bits-ui' dependency and instructions to copy component source files, presented using documentation helper components.

```Svelte
{#snippet manual()}
<Steps>
<Step>

Install `bits-ui`:

</Step>
<Step>Copy and paste the component source files linked at the top of this page into your project.</Step>
<PMInstall command="bits-ui -D" />
</Steps>
{/snippet}
```

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

### Install bits-ui Dependency Manually - Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/tabs.md

Installs the `bits-ui` library as a development dependency using a package manager (like pnpm, npm, or yarn). This is a prerequisite for the manual installation method of the Tabs component. Requires a package manager to be installed. Input is the command string; output is package installation.

```Shell
pnpm add bits-ui -D
```

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

### shadcn-svelte Init Command Options - Text

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/cli.md

This snippet lists the available command-line options for the `shadcn-svelte init` command. These options allow users to automate or override interactive prompt answers and control aspects like working directory or dependency installation.

```txt
Usage: shadcn-svelte init [options]

initialize your project and install dependencies

Options:
  -c, --cwd <cwd>            the working directory (default: the current directory)
  --no-deps                  disable adding & installing dependencies
  --style <name>             the style for the components (choices: "default", "new-york")
  --base-color <name>        the base color for the components (choices: "slate", "gray", "zinc", "neutral", "stone")
  --css <path>               path to the global CSS file
  --tailwind-config <path>   path to the tailwind config file
  --components-alias <path>  import alias for components
  --utils-alias <path>       import alias for utils
  -h, --help                 display help for command
```

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

### Installing Toggle Group Manually (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/toggle-group.md

This snippet outlines the manual installation process for the toggle group component using Svelte components to structure the steps. It includes installing the `bits-ui` library as a dependency and then copying the necessary source files. It uses the `<PMInstall>` component to render the command `bits-ui -D`.

```svelte
<Steps>\n<Step>\n\nInstall \`bits-ui\`:\n\n</Step>\n<PMInstall command="bits-ui -D" />\n<Step>Copy and paste the component source files linked at the top of this page into your project.</Step>\n</Steps>
```

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

### Listing Available Components (bash)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/packages/cli/README.md

Running the `add` command without specifying a component will display a list of all available components that can be added to the project. This helps in discovering components you might want to use.

```bash
npx shadcn-svelte add
```

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

### Basic Menubar Component Usage Example (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/menubar.md

This Svelte snippet provides a foundational example of how to import and use the Menubar component and its sub-components (`Root`, `Menu`, `Trigger`, `Content`, `Item`, `Separator`, `Shortcut`). It demonstrates the typical structure and basic menu items.

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

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

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

### Executing shadcn-svelte Init Command - Bash

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/cli.md

This command executes the initialization process for a shadcn-svelte project using npx. It's the starting point for setting up components and configuration, typically run in the project's root directory.

```bash
shadcn-svelte@next init
```

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

### Install bits-ui Dependency (Bash)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/button.md

Install the required 'bits-ui' dependency using your preferred package manager (npm, yarn, or pnpm). This dependency is necessary for the manual installation of the Button component.

```bash
npm install bits-ui -D
# or pnpm install bits-ui -D
# or yarn add bits-ui -D
```

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

### Install bits-ui Dependency Manually (Bash)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/collapsible.md

If installing the component manually, you first need to install the core 'bits-ui' library as a development dependency using your preferred package manager (npm, yarn, or pnpm).

```bash
npm install bits-ui -D
```

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

### Creating New SvelteKit Project Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/sveltekit.md

This command uses the Svelte CLI (sv) to create a new SvelteKit project named my-app. It specifies a particular version of the CLI (@0.6.18). This is the first step in setting up a new SvelteKit application.

```shell
sv@0.6.18 create my-app
```

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

### Configuring Vite Path Aliases (TypeScript)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/manual.md

Configures path aliases in the `vite.config.ts` file for Svelte projects built with Vite. It uses Node.js `path` module to resolve the `$lib` alias to the `src/lib` directory, ensuring Vite correctly bundles modules referenced with this alias. This is an alternative alias configuration for non-SvelteKit setups.

```typescript
import path from "path";

export default defineConfig({
  // ... other options
  resolve: {
    alias: {
      $lib: path.resolve("./src/lib")
    }
  }
});
```

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

### Rendering Manual Install Steps - Svelte Component

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/badge.md

Employs the custom Svelte `Steps` and `Step` components to format and display the instructions for manually installing the badge component by copying source files.

```svelte
<Steps>
<Step>Copy and paste the component source files linked at the top of this page into your project.</Step>
</Steps>
```

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

### Adding Button Component with shadcn-svelte Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/sveltekit.md

This command instructs the shadcn-svelte CLI (using the next version) to add the Button component to the project. The CLI will download the component's source code and dependencies based on the configuration defined during the init step.

```shell
shadcn-svelte@next add button
```

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

### Installing bits-ui Dependency Manually (Manual Install Step)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/scroll-area.md

As part of the manual installation process, install the required 'bits-ui' library as a development dependency using your preferred package manager (npm, pnpm, or yarn).

```bash
npm install bits-ui -D
```

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

### Install Card Component via CLI (Shell)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/card.md

Installs the Card component into your shadcn-svelte project using the command-line interface tool. This command fetches the component source files and adds them to your project directory, handling dependencies.

```Shell
npx shadcn-svelte add card
```

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

### Installing Toggle Group via CLI (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/toggle-group.md

This snippet demonstrates installing the `toggle-group` component using a command-line helper component, likely for a package manager integrated with the shadcn-svelte CLI. It specifies the component name "toggle-group" as a parameter. This is part of the CLI installation process.

```svelte
<PMAddComp name="toggle-group" />
```

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

### Install bits-ui Dependency using Svelte/CLI

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/context-menu.md

This Svelte snippet represents the command used to install the `bits-ui` library as a development dependency. It typically renders a package manager command like `npm install bits-ui -D`, `pnpm add bits-ui -D`, or `yarn add bits-ui -D`. Requires a package manager installed and configured.

```Svelte
<PMInstall command="bits-ui -D" />
```

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

### Installing Slider Component via CLI (Shell)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/slider.md

Provides the command-line interface command to automatically add the Slider component using the shadcn-svelte CLI tool. This simplifies the installation process by adding the component source files and dependencies.

```Shell
pnpm shadcn-svelte add slider
```

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

### Defining Global Styles and Theming (CSS)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/manual.md

Sets up global styles and CSS variables in a PostCSS file (`.pcss`). It imports Tailwind layers (`base`, `components`, `utilities`) and defines light and dark mode themes using HSL color variables within a `:root` selector and `.dark` class. Basic body styles are also applied here.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 72.22% 50.59%;
    --destructive-foreground: 0 0% 98%;
    --ring: 240 5% 64.9%;
    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 240 5% 64.9%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --ring: 240 3.7% 48%;

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}
```

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

### Importing and Using Input Component - Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/input.md

Demonstrates the basic usage of the `Input` component in Svelte. It shows how to import the component from the library path and render it in the template. This snippet provides a minimal example for integrating the Input component into a Svelte application.

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

<Input />
```

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

### Install bits-ui Dependency

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/hover-card.md

Shows the command to install the `bits-ui` library as a development dependency, which is a required prerequisite for the Hover Card component. Use your preferred package manager (npm, yarn, pnpm).

```Shell
npm install bits-ui -D
```

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

### Installing bits-ui Dependency Manually (Shell)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/slider.md

Provides the command to install the necessary dependency, 'bits-ui', using a package manager like pnpm. This step is required as part of the manual installation process for the Slider component.

```Shell
pnpm install bits-ui -D
```

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

### Install Dependencies Manually (npm)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/range-calendar.md

Provides the command to manually install the required dependencies (`bits-ui` and `@internationalized/date`) for the Range Calendar component using the npm package manager. They are installed as development dependencies.

```bash
npm install bits-ui @internationalized/date -D
```

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

### Importing Global Styles in SvelteKit (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/manual.md

Imports the main global styles defined in `app.pcss` into the root SvelteKit layout file (`+layout.svelte`). This ensures that the base styles, Tailwind utilities, and theme variables are available throughout the application. It uses Svelte's `<script>` block and `@render` syntax for the layout structure.

```svelte
<script lang="ts">
  import "../app.pcss";
  let { children } = $props();
</script>

{@render children?.()}
```

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

### Install bits-ui Dependency (Manual)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/accordion.md

Manually install the core bits-ui library, which is a required peer dependency for the shadcn-svelte components. This step is part of the manual installation process.

```Shell
npm install bits-ui
```

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

### Rendering CLI Install Command - Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/breadcrumb.md

Uses a Svelte component <PMAddComp> to display the appropriate CLI command (e.g., npx shadcn-svelte add breadcrumb) for installing the breadcrumb component. This component requires imports from '$lib/components/docs'.

```svelte
<PMAddComp name="breadcrumb" />
```

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

### Create Global CSS File (CSS)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/astro.md

This code block demonstrates the content of a global CSS file (e.g., src/styles/app.css) required for Tailwind CSS. It includes the essential `@tailwind` directives to inject Tailwind's base styles, components, and utility classes.

```CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

### Install bits-ui Dependency (CLI)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/dropdown-menu.md

Installs the 'bits-ui' library, a required dependency for the dropdown menu component, using a package manager command and the -D flag to add it as a development dependency.

```CLI
bits-ui -D
```

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

### Implementing Basic Tabs Component - Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/tabs.md

Demonstrates the basic usage of the imported Tabs components (`Root`, `List`, `Trigger`, `Content`) to create a simple tab interface. It shows how to structure the components and associate content with specific tab triggers using the `value` prop. Requires the Tabs components (`$lib/components/ui/tabs`) and `bits-ui` (implicitly) to be installed.

```Svelte
<script lang="ts">\n  import * as Tabs from "$lib/components/ui/tabs/index.js";\n</script>\n\n<Tabs.Root value="account" class="w-[400px]">\n  <Tabs.List>\n    <Tabs.Trigger value="account">Account</Tabs.Trigger>\n    <Tabs.Trigger value="password">Password</Tabs.Trigger>\n  </Tabs.List>\n  <Tabs.Content value="account">\n    Make changes to your account here.\n  </Tabs.Content>\n  <Tabs.Content value="password">Change your password here.\n  </Tabs.Content>\n</Tabs.Root>
```

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

### Install PaneForge Dependency via Helper (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/resizable.md

This Svelte component call is used within the documentation to represent the package manager command for installing the required `paneforge` library as a development dependency (`-D`).

```svelte
<PMInstall command="paneforge -D" />
```

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

### Using Shadcn-Svelte Button Component Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/sveltekit.md

This Svelte code snippet demonstrates how to import and use the Button component added by the shadcn-svelte CLI. It shows the import path $lib/components/ui/button/index.js and the basic usage of the component tag <Button>.

```svelte
<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>

<Button>Click me</Button>
```

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

### Install bits-ui Dependency Manually - Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/checkbox.md

Installs the core bits-ui library as a development dependency. This is a prerequisite for using the checkbox component and other bits-ui based components when installing manually.

```Shell
npm install bits-ui -D
```

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

### Install Checkbox Component via CLI - Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/checkbox.md

Installs the checkbox component using the shadcn-svelte CLI. This command fetches the component files and adds them to your project, managing dependencies automatically.

```Shell
npx shadcn-svelte add checkbox
```

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

### Basic Svelte Table Usage Example

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/table.md

Demonstrates how to construct a basic table structure using the imported Table components. It includes examples for adding a table caption, a header row with column titles, and a body with a sample data row using nested component tags.

```svelte
<Table.Root>
  <Table.Caption>A list of your recent invoices.</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head class="w-[100px]">Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head>Method</Table.Head>
      <Table.Head class="text-right">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell class="font-medium">INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
      <Table.Cell class="text-right">$250.00</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>
```

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

### Installing bits-ui Dependency Manually

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/radio-group.md

Install the core bits-ui library as a development dependency. This library is a prerequisite for the shadcn-svelte radio group component.

```cli
npm install bits-ui -D
# or pnpm add bits-ui -D
# or yarn add bits-ui -D
```

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

### Configuring SvelteKit Path Aliases (JavaScript)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/manual.md

Configures SvelteKit's path aliases in `svelte.config.js`. This is required if you're using SvelteKit and need custom aliases like `$/` instead of or in addition to the default `$lib`. It maps the specified alias to a directory within your project structure.

```javascript
const config = {
  // ... other config
  kit: {
    // ... other config
    alias: {
      "@/*": "./path/to/lib/*"
    }
  }
};
```

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

### Displaying CLI Component Add Command (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/menubar.md

This Svelte snippet uses a helper component `<PMAddComp>` to render the command required for adding the 'menubar' component via a documentation-specific CLI or package manager helper. It is part of the installation instructions for the component.

```Svelte
<PMAddComp name="menubar" />
```

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

### Add Collapsible Component via CLI (Bash)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/collapsible.md

Use the shadcn-svelte CLI tool to automatically add the Collapsible component files and necessary dependencies to your project. This is the recommended and easiest installation method.

```bash
npx shadcn-svelte add collapsible
```

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

### Configuring shadcn-svelte Tailwind (JavaScript)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/manual.md

Provides a comprehensive Tailwind CSS configuration file for integrating `shadcn-svelte` components. It defines theme extensions like custom colors based on CSS variables, border radii, fonts, and animations, including `accordion` and `caret-blink`. It also includes the `tailwindcss-animate` plugin.

```javascript
import { fontFamily } from "tailwindcss/defaultTheme";
import tailwindcssAnimate from "tailwindcss-animate";

/** @type {import('tailwindcss').Config} */
const config = {
  darkMode: ["class"],
  content: ["./src/**/*.{html,js,svelte,ts}"],
  safelist: ["dark"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px"
      }
    },
    extend: {
      colors: {
        border: "hsl(var(--border) / <alpha-value>)",
        input: "hsl(var(--input) / <alpha-value>)",
        ring: "hsl(var(--ring) / <alpha-value>)",
        background: "hsl(var(--background) / <alpha-value>)",
        foreground: "hsl(var(--foreground) / <alpha-value>)",
        primary: {
          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
          foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
        },
        muted: {
          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
          foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
        },
        accent: {
          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
          foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
        },
        popover: {
          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
          foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
        },
        card: {
          DEFAULT: "hsl(var(--card) / <alpha-value>)",
          foreground: "hsl(var(--card-foreground) / <alpha-value>)"
        },
        sidebar: {
          DEFAULT: "hsl(var(--sidebar-background))",
          foreground: "hsl(var(--sidebar-foreground))",
          primary: "hsl(var(--sidebar-primary))",
          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
          accent: "hsl(var(--sidebar-accent))",
          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
          border: "hsl(var(--sidebar-border))",
          ring: "hsl(var(--sidebar-ring))"
        }
      },
      borderRadius: {
        xl: "calc(var(--radius) + 4px)",
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)"
      },
      fontFamily: {
        sans: ["geist-sans", ...fontFamily.sans]
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--bits-accordion-content-height)" }
        },
        "accordion-up": {
          from: { height: "var(--bits-accordion-content-height)" },
          to: { height: "0" }
        },
        "caret-blink": {
          "0%,70%,100%": { opacity: "1" },
          "20%,50%": { opacity: "0" }
        }
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "caret-blink": "caret-blink 1.25s ease-out infinite"
      }
    }
  },
  plugins: [tailwindcssAnimate]
};

export default config;
```

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

### Adding Tailwind CSS to SvelteKit Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/sveltekit.md

This command utilizes the Svelte CLI (sv) to automatically configure and add Tailwind CSS to the existing SvelteKit project. It simplifies the process of integrating the utility-first CSS framework into the project setup.

```shell
sv@0.6.18 add tailwindcss
```

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

### Basic Separator Component Usage - Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/separator.md

Import the Separator component from the library and render it in the Svelte template. This code block demonstrates the minimal required code for basic usage of the component after installation.

```svelte
<script lang="ts">
  import { Separator } from "$lib/components/ui/separator/index.js";
</script>

<Separator />
```

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

### Basic Form Example with Input

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/form.md

Provides a simple example demonstrating how to use Form.Field and Form.Control with an Input component. It shows binding the input value to a Superforms form data store and using the `use:enhance` action for client-side enhancement.

```svelte
<form method="POST" use:enhance>
  <Form.Field {form} name="email">
    <Form.Control>
      {#snippet children({ props })}
        <Form.Label>Email</Form.Label>
        <Input {...props} bind:value={$formData.email} />
      {/snippet}
    </Form.Control>
    <Form.Description />
    <Form.FieldErrors />
  </Form.Field>
</form>
```

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

### Basic Popover Usage - Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/popover.md

Imports the necessary Popover component parts (Root, Trigger, Content) and demonstrates the basic structure for implementing a popover. The trigger opens the content area when interacted with. This requires the Popover component files and the underlying bits-ui library to be installed.

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

<Popover.Root>
  <Popover.Trigger>Open</Popover.Trigger>
  <Popover.Content>Place content for the popover here.</Popover.Content>
</Popover.Root>
```

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

### Import and Use shadcn-svelte Component in Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/vite.md

Demonstrates how to import and use a component, specifically the Button component, after it has been added to your project using the shadcn-svelte CLI. Components are typically imported from the configured '$lib/components/ui' path.

```Svelte
<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>

<Button>Click me</Button>
```

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

### Add Resizable Component via CLI Helper (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/resizable.md

This Svelte component call is used within the documentation to represent the command for adding the `resizable` component using a CLI utility, part of the shadcn-svelte installation process.

```svelte
<PMAddComp name="resizable" />
```

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

### Displaying Sidebar Menu Skeleton (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/sidebar.md

Provides an example of using Sidebar.MenuSkeleton within Sidebar.MenuItem components to indicate a loading state for menu items. It shows how to render multiple skeleton items using a Svelte #each loop.

```svelte
<Sidebar.Menu>
  {#each Array.from({ length: 5 }) as _, index (index)}
    <Sidebar.MenuItem>
      <Sidebar.MenuSkeleton />
    </Sidebar.MenuItem>
  {/each}
</Sidebar.Menu>
```

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

### Resizable Vertical Layout Example (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/resizable.md

Shows how to configure the `Resizable.PaneGroup` component to arrange panels vertically by setting the `direction` prop to "vertical". Requires importing the Resizable components.

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

<Resizable.PaneGroup direction="vertical">
  <Resizable.Pane>One</Resizable.Pane>
  <Resizable.Handle />
  <Resizable.Pane>Two</Resizable.Pane>
</Resizable.PaneGroup>
```

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

### Updating shadcn-svelte Configuration (JSON)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/migration/svelte-5/index.md

Demonstrates the required changes to the `components.json` file for Svelte 5. It adds the `registry` URL for fetching components and new aliases (`ui`, `hooks`) under the `aliases` object.

```json
{
  "$schema": "https://next.shadcn-svelte.com/schema.json",
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app.pcss",
    "baseColor": "zinc"
  },
  "aliases": {
    "components": "$lib/components",
    "utils": "$lib/utils",
    "ui": "$lib/components/ui",
    "hooks": "$lib/hooks"
  },
  "typescript": true,
  "registry": "https://next.shadcn-svelte.com/registry"
}
```

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

### Adding Radio Group Component using CLI

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/radio-group.md

Install the radio-group component files into your project using the shadcn-svelte CLI tool. This command fetches and adds the necessary Svelte component files.

```cli
npx shadcn-svelte add radio-group
```

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

### Import Global CSS in Astro Page (TypeScript)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/astro.md

This snippet illustrates how to import the global CSS file within the frontmatter section of an Astro page component (e.g., src/pages/index.astro). Importing the CSS file ensures that the styles are included and applied to the page.

```TypeScript
---
import "$lib/styles/app.css";
---
```

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

### Configuring TypeScript Path Aliases (JSON)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/manual.md

Sets up path aliases in the `tsconfig.json` file for Svelte projects not using SvelteKit. This snippet maps the `$lib` alias to the `src/lib` directory, allowing for cleaner imports within a TypeScript context. It helps the TypeScript compiler resolve modules correctly.

```json
{
  "compilerOptions": {
    // ... other options
    "paths": {
      "$lib": ["./src/lib"],
      "$lib/*": ["./src/lib/*"]
    }
  }
}
```

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

### Update Tailwind Content Configuration (JavaScript)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/astro.md

This JavaScript snippet demonstrates how to update the `content` array in your Tailwind configuration file (tailwind.config.mjs). It adds the `astro` extension to the glob pattern, ensuring Tailwind scans `.astro` files for classes after running the shadcn-svelte init command.

```JavaScript
const config = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  // ...
};
// ...
export default config;
```

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

### Interactive Init Prompt - Text

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/cli.md

This snippet illustrates the interactive questions asked by the `shadcn-svelte init` command to configure the project's components.json file. It covers style, base color, CSS file location, Tailwind config path, and import aliases.

```txt
Which style would you like to use? › Default
Which base color would you like to use? › Slate
Where is your global CSS file? (this file will be overwritten) › src/app.css
Where is your Tailwind config located? (this file will be overwritten) › tailwind.config.[cjs|js|ts]
Configure the import alias for components: › $lib/components
Configure the import alias for utils: › $lib/utils
```

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

### Using Toggle Group Component (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/toggle-group.md

This Svelte snippet demonstrates how to use the `ToggleGroup` component. It imports the component parts and then renders a root `ToggleGroup.Root` with `type="single"` and multiple `ToggleGroup.Item` children, each with a `value` and content. This shows a basic single-select toggle group setup.

```svelte
<script lang="ts">\n  import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";\n</script>\n\n<ToggleGroup.Root type="single">\n  <ToggleGroup.Item value="a">A</ToggleGroup.Item>\n  <ToggleGroup.Item value="b">B</ToggleGroup.Item>\n  <ToggleGroup.Item value="c">C</ToggleGroup.Item>\n</ToggleGroup.Root>
```

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

### Adding Pagination Component CLI (Svelte)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/pagination.md

Svelte component code used within documentation to represent the command-line interface command for automatically adding the pagination component to a project. This snippet renders the action required for CLI-based installation using the shadcn-svelte utility.

```svelte
<PMAddComp name="pagination" />
```

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

### Import and Use Shadcn Svelte Button in Astro (Astro)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/astro.md

This Astro snippet shows how to import a shadcn-svelte component, like the Button, from its configured path alias in the frontmatter of an .astro file. It then demonstrates how to use the imported component within the HTML body of the Astro page.

```Astro
---
import { Button } from "$lib/components/ui/button/index.js";
---

<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>
```

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

### Configuring JS Import Aliases (JSON)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/index.md

Demonstrates how to configure import aliases in a JavaScript project using a 'jsconfig.json' file. This setup allows resolving module paths like '$lib/*' to './src/lib/*', simplifying imports and improving code readability by avoiding complex relative paths.

```json
{
  "compilerOptions": {
    "paths": {
      "$lib/*": ["./src/lib/*"]
    }
  }
}
```

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

### Adding Separator to Input OTP in Svelte

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/input-otp.md

This snippet shows how to use the `InputOTP.Separator` component to add a visual separator between groups of input cells. In this example, a 4-digit OTP is split into two groups of two digits with a separator in between. It requires the Input OTP component files installed.

```svelte
<script lang="ts">
  import * as InputOTP from "$lib/components/ui/input-otp/index.js";
</script>

<InputOTP.Root maxlength={4}>
  {#snippet children({ cells })}
    <InputOTP.Group>
      {#each cells.slice(0, 2) as cell}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
    <InputOTP.Separator />
    <InputOTP.Group>
      {#each cells.slice(2, 4) as cell}
        <InputOTP.Slot {cell} />
      {/each}
    </InputOTP.Group>
  {/snippet}
</InputOTP.Root>
```

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

### Configuring SvelteKit Path Aliases JavaScript

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/sveltekit.md

This snippet shows how to configure path aliases in the svelte.config.js file. It demonstrates adding a custom alias @/* within the kit.alias property to map to a local path like ./path/to/lib/*, useful for organizing project imports.

```javascript
const config = {
  // ... other config
  kit: {
    // ... other config
    alias: {
      "@/*": "./path/to/lib/*"
    }
  }
};
```

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

### Rendering CLI Install Command - Svelte Component

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/badge.md

Uses the custom Svelte component `PMAddComp` to display the package manager command required to add the badge component to the project. This snippet is part of the documentation page's Svelte code structure.

```svelte
<PMAddComp name="badge" />
```

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

### Add Context Menu Component using Svelte/CLI

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/context-menu.md

This Svelte snippet represents the command used to add the context menu component files to the project. It typically renders a package manager command like `npx shadcn-svelte add context-menu` or similar, abstracting the specific package manager. Requires the shadcn-svelte CLI setup.

```Svelte
<PMAddComp name="context-menu" />
```

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

### Implementing a Basic Svelte Combobox

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/combobox.md

This Svelte code snippet demonstrates the core implementation of the Combobox component. It uses the Popover and Command components to create a dropdown list with searchable items (frameworks in this example). The script manages the open state and selected value, and includes a function to handle item selection and focus management.

```svelte
<script lang="ts">
  import Check from "@lucide/svelte/icons/check";
  import ChevronsUpDown from "@lucide/svelte/icons/chevrons-up-down";
  import { tick } from "svelte";
  import * as Command from "$lib/components/ui/command/index.js";
  import * as Popover from "$lib/components/ui/popover/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import { cn } from "$lib/utils.js";

  const frameworks = [
    {
      value: "sveltekit",
      label: "SvelteKit",
    },
    {
      value: "next.js",
      label: "Next.js",
    },\n    {
      value: "nuxt.js",
      label: "Nuxt.js",
    },
    {
      value: "remix",
      label: "Remix",
    },
    {
      value: "astro",
      label: "Astro",
    },
  ];

  let open = $state(false);
  let value = $state("");
  let triggerRef = $state<HTMLButtonElement>(null!);

  const selectedValue = $derived(
    frameworks.find((f) => f.value === value)?.label
  );

  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger() {
    open = false;
    tick().then(() => {
      triggerRef.focus();
    });
  }
</script>

<Popover.Root bind:open>
  <Popover.Trigger bind:ref={triggerRef}>
    {#snippet child({ props })}
      <Button
        variant="outline"
        class="w-[200px] justify-between"
        {...props}
        role="combobox"
        aria-expanded={open}
      >
        {selectedValue || "Select a framework..."}
        <ChevronsUpDown class="ml-2 size-4 shrink-0 opacity-50" />
      </Button>
    {/snippet}
  </Popover.Trigger>
  <Popover.Content class="w-[200px] p-0">
    <Command.Root>
      <Command.Input placeholder="Search framework..." />
      <Command.List>
        <Command.Empty>No framework found.</Command.Empty>
        <Command.Group>
          {#each frameworks as framework}
            <Command.Item
              value={framework.value}
              onSelect={() => {
                value = framework.value;
                closeAndFocusTrigger();
              }}
            >
              <Check
                class={cn(
                  "mr-2 size-4",
                  value !== framework.value && "text-transparent"
                )}
              />
              {framework.label}
            </Command.Item>
          {/each}
        </Command.Group>
      </Command.List>
    </Command.Root>
  </Popover.Content>
</Popover.Root>
```

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

### Add Separator Component via CLI - Shell

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/components/separator.md

Use the shadcn-svelte CLI, typically invoked via npx, to automatically add the necessary files for the Separator component to your project. This command corresponds to the documentation's CLI installation step presented using a Svelte component (`<PMAddComp />`).

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

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

### Configure Path Aliases in tsconfig.json (JSONC)

Source: https://github.com/zippoxer/shadcn-svelte-next/blob/main/sites/docs/src/content/installation/astro.md

This snippet shows how to add or update the "paths" property within the "compilerOptions" in your tsconfig.json file. This configuration sets up path aliases, specifically mapping '$lib/*' to './src/*', to simplify module imports in your project.

```JSONC
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "$lib/*": ["./src/*"]
    }
    // ...
  }
}
```
Tokens:
Raw