### Installing Registry Item using shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/getting-started.md

This command demonstrates how to install a specific registry item, 'hello-world.json', from a local registry server using the 'shadcn-svelte' CLI's 'add' command. It specifies the '@next' version of the CLI for the operation.

```shell
shadcn-svelte@next add http://localhost:5173/r/hello-world.json
```

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

### Installing Badge Component via CLI (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/badge.md

This snippet demonstrates how to install the `Badge` component using the project's command-line interface tool, typically `shadcn-svelte add`, which automates the setup process.

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

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

### Installing bits-ui Dependency for Manual Setup

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/hover-card.md

This snippet represents the command to install `bits-ui` as a development dependency, which is required when manually setting up the `hover-card` component.

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

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

### Adding a Specific shadcn-svelte Component Example (Bash)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/packages/cli/README.md

This is an example of using the `add` command to integrate the `alert-dialog` component into your project. It demonstrates how to specify a component name for installation.

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

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

### Manual Installation of bits-ui Dependency (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/sheet.md

This Svelte template snippet demonstrates using the `PMInstall` component to display the command for installing `bits-ui` as a development dependency, a prerequisite for manual Sheet component setup.

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

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

### Creating a Basic Svelte Component for Registry

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/getting-started.md

This Svelte code defines a simple `<HelloWorld />` component, demonstrating how to import a `Button` component and use it to display "Hello World". This component is intended to be added to the `shadcn-svelte` registry, showcasing a basic component structure.

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

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

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

### Installing bits-ui for Manual Radio Group Setup

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/radio-group.md

This step is part of the manual installation process for the Radio Group component, requiring the installation of `bits-ui` as a development dependency. `bits-ui` provides the foundational primitives for the Radio Group component's functionality.

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

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

### Adding a Component Definition to registry.json

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/getting-started.md

This `registry.json` snippet shows how to define a component within the `items` array, including its name, type, title, description, and file paths. This entry makes the `hello-world` component discoverable and usable by the `shadcn-svelte` CLI, linking the component's metadata to its physical file location.

```json
{
  "$schema": "https://next.shadcn-svelte.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "./src/lib/hello-world/hello-world.svelte",
          "type": "registry:component"
        }
      ]
    }
  ]
}
```

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

### Initializing registry.json for shadcn-svelte Registry

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/getting-started.md

This snippet shows the initial structure of the `registry.json` file, which is essential for the `shadcn-svelte` CLI to build the component registry. It defines the schema, a unique name for the registry, its homepage, and an empty array to hold definitions of registry items.

```json
{
  "$schema": "https://shadcn-svelte.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    // ...
  ]
}
```

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

### Installing Command Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/command.md

This command uses the `shadcn-svelte` CLI to automatically add the `command` component and its dependencies to your project, simplifying the setup process.

```Shell
npx shadcn-svelte add command
```

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

### Installing Block with Primitive Overrides (JSON)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/examples.md

This JSON configuration is used with `npx shadcn-svelte@next add` to install the `login-01` block from the shadcn-svelte registry. It simultaneously overrides the default `button`, `input`, and `label` primitives with custom versions sourced from external URLs, allowing for consistent styling across components.

```JSON
{
  "$schema": "https://next.shadcn-svelte.com/schema/registry-item.json",
  "name": "custom-login",
  "type": "registry:block",
  "registryDependencies": [
    "login-01",
    "https://example.com/r/button.json",
    "https://example.com/r/input.json",
    "https://example.com/r/label.json"
  ]
}
```

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

### Adding Registry Build Script to package.json

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/getting-started.md

This `package.json` snippet demonstrates how to add a `registry:build` script, which uses the `pnpm shadcn-svelte registry build` command to generate the registry JSON files. This script automates the build process for the component registry, making it easy to compile and prepare components for distribution.

```json
{
  "scripts": {
    "registry:build": "pnpm shadcn-svelte registry build"
  }
}
```

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

### Installing Switch Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/switch.md

This snippet demonstrates how to add the Switch component to your project using the command-line interface, typically via a package manager helper. It simplifies the setup process by automating the component's integration.

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

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

### Installing Range Calendar Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/range-calendar.md

This snippet demonstrates how to install the Range Calendar component using the project's command-line interface. It leverages a package manager's 'add component' command to quickly integrate the component into your project, simplifying setup.

```npm
npx shadcn-svelte add range-calendar
```

```yarn
yarn dlx shadcn-svelte add range-calendar
```

```pnpm
pnpm dlx shadcn-svelte add range-calendar
```

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

### Starting Svelte Development Server (Bash)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/v4/README.md

This code snippet shows how to start the development server for a Svelte project after dependencies have been installed. The `npm run dev` command launches the server, and an optional `--open` flag can be used to automatically open the application in a new browser tab, facilitating rapid development and testing.

```Bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

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

### Installing Tabs Component via shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/tabs.md

This snippet demonstrates how to add the Tabs component to your Svelte project using the `shadcn-svelte` command-line interface, which automates the setup process.

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

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

### Installing Label Component via shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/label.md

This command uses the shadcn-svelte CLI to automatically add the Label component and its required dependencies to your project, simplifying the setup process.

```shell
npx shadcn-svelte add label
```

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

### Installing Card Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/card.md

This snippet illustrates how to quickly add the Card component to your Svelte project using the `shadcn-svelte` CLI tool, streamlining the setup process.

```shell
npx shadcn-svelte add card
```

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

### Installing Alert Dialog Component via CLI (shadcn-svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/alert-dialog.md

This command utilizes the shadcn-svelte CLI to automatically add the alert-dialog component and its necessary dependencies to your project. It streamlines the setup process by handling file generation and configuration.

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

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

### Installing Resizable Component via CLI (shadcn-svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/resizable.md

This snippet demonstrates how to add the `resizable` component to your Svelte project using the `shadcn-svelte` CLI tool. This is the recommended and easiest way to integrate the component, automating the setup process.

```Shell
npx shadcn-svelte add resizable
```

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

### Manual Installation of Progress Component Dependencies (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/progress.md

This snippet outlines the manual steps required to install the 'Progress' component. It includes installing the 'bits-ui' dependency and copying the component's source files directly into your project, providing more control over the installation process.

```Svelte
<Steps>

### Install `bits-ui`:

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

### Copy and paste the component source files linked at the top of this page into your project.

</Steps>
```

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/popover.md

This snippet outlines the manual installation of 'bits-ui' as a development dependency, which is a prerequisite for the shadcn-svelte Popover component. This step is essential if you opt for manual component setup rather than using the CLI.

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

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

### Installing Separator Component via shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/separator.md

This snippet demonstrates how to install the Separator component using the shadcn-svelte CLI tool. This method automates the process of adding the component's source files to your project, simplifying setup.

```Shell
npx shadcn-svelte add separator
```

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

### Svelte Template for Manual bits-ui Installation

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/select.md

This Svelte template snippet utilizes the `PMInstall` component to display the command for manually installing the `bits-ui` dependency, a prerequisite for the `select` component, using a package manager.

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

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/scroll-area.md

This command installs `bits-ui` as a development dependency, which is a required prerequisite for the manual setup of the `ScrollArea` component.

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

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

### Installing Slider Component via Shadcn Svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/slider.md

This command uses the shadcn-svelte CLI to automatically add the Slider component to your project, including its dependencies and source files. It's the recommended method for quick setup.

```Shell
npx shadcn-svelte add slider
```

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

### Configuring shadcn-svelte components.json CLI Prompts

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/sveltekit.md

Shows the interactive prompts and typical responses when running the `shadcn-svelte@next init` command, guiding the user through setting up base color, CSS file, and import aliases for various component categories.

```CLI Output
Which base color would you like to use? › Slate
Where is your global CSS file? (this file will be overwritten) › src/app.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
```

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

### Adding Tailwind CSS with sv CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/manual.md

This command utilizes the `sv` CLI tool to automatically add and configure Tailwind CSS to your Svelte project, simplifying the initial setup for styling.

```Shell
sv add tailwindcss
```

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

### Initializing shadcn-svelte Project Dependencies (Bash)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/packages/cli/README.md

This command initializes a new shadcn-svelte project by installing necessary dependencies, adding the `cn` utility, configuring the project, and setting up CSS variables. It's the first step for setting up a new project.

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

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

### Installing Accordion Component via CLI (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/accordion.md

This Svelte snippet uses the `PMAddComp` component to integrate the Accordion component into your project. This component typically executes a `shadcn-svelte add` command behind the scenes, simplifying the setup process.

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

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

### Installing Dropdown Menu Component via shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/dropdown-menu.md

This Svelte snippet represents the command to add the Dropdown Menu component using the `shadcn-svelte` CLI. It automates the process of integrating the component's files and dependencies into your project, simplifying setup.

```svelte
<PMAddComp name="dropdown-menu" />
```

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

### Configuring components.json with shadcn-svelte init

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/cli.md

This snippet shows the interactive prompts presented when running the `shadcn-svelte@next init` command. It guides the user through configuring paths for CSS, components, utilities, and other aliases, which are then saved in `components.json`.

```txt
Which base color would you like to use? › Slate
Where is your global CSS file? (this file will be overwritten) › src/app.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
```

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

### Installing Bits UI Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/input-otp.md

This snippet shows the command to install `bits-ui` as a development dependency, which is a prerequisite for the Input OTP component when performing a manual installation.

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

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

### Installing Core Shadcn-Svelte Dependencies

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/manual.md

This command installs essential utility libraries: `tailwind-variants` for variant-based styling, `clsx` for conditional class names, `tailwind-merge` for resolving Tailwind conflicts, and `tw-animate-css` for animations, all crucial for shadcn-svelte components.

```Shell
npm install tailwind-variants clsx tailwind-merge tw-animate-css
```

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

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

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/menubar.md

This step outlines the manual installation of `bits-ui`, a core dependency for the Menubar component, as a development dependency using pnpm. This is a prerequisite for manual component integration.

```shell
pnpm install bits-ui -D
```

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

### Installing Lucide Svelte Icon Library

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/manual.md

This command installs `@lucide/svelte`, a popular icon library, making Lucide icons readily available for use within your Svelte components, often required by shadcn-svelte.

```Shell
npm install @lucide/svelte
```

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

### Installing Tailwind Vite Plugin

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/migration/tailwind-v4.md

This command installs the `@tailwindcss/vite` plugin as a development dependency. This plugin is crucial for directly integrating Tailwind CSS v4 with Vite, serving as the replacement for the previous PostCSS setup.

```Shell
npm install @tailwindcss/vite -D
```

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/toggle.md

This command installs 'bits-ui' as a development dependency, which is a prerequisite for the Toggle component when performing a manual installation. This step ensures all necessary base components are available.

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

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

### Options for shadcn-svelte add command

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/cli.md

This snippet details the command-line options available for the `shadcn-svelte add` command. These options provide control over the component addition process, including skipping dependency installation, installing all components, or overwriting existing files.

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

add components to your project

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

Options:
  -c, --cwd <path>   the working directory (default: the current directory)
  --no-deps          skips adding & installing package dependencies
  -a, --all          install all components to your project (default: false)
  -y, --yes          skip confirmation prompt (default: false)
  -o, --overwrite    overwrite existing files (default: false)
  --proxy <proxy>    fetch components from registry using a proxy
  -h, --help         display help for command
```

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

### Installing Input Component via CLI - Bash

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/input.md

This snippet provides the command to install the Input component using the Shadcn Svelte CLI. Executing this command will add the necessary files for the Input component to your project, integrating it into your UI library.

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

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

### Installing Toggle Component via shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/toggle.md

This command adds the Toggle component and its dependencies to your project using the shadcn-svelte CLI, streamlining the installation process. It's the recommended way to install shadcn-svelte components.

```Shell
npx shadcn-svelte add toggle
```

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

### Installing Scroll Area Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/scroll-area.md

This snippet provides the command to add the `scroll-area` component to your project using the shadcn-svelte CLI, automating the setup process.

```shell
npx shadcn-svelte add scroll-area
```

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

### Adding Popover Component via shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/popover.md

This snippet demonstrates how to quickly add the Popover component to your project using the shadcn-svelte command-line interface. This method automates the setup and integration of the component files, simplifying the installation process.

```shell
npx shadcn-svelte add popover
```

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

### Manual Installation: Install bits-ui Dependency (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/checkbox.md

This Svelte snippet shows the use of the `PMInstall` component to represent the command for installing `bits-ui` as a development dependency (e.g., `npm install bits-ui -D` or `pnpm add bits-ui -D`). `bits-ui` is a foundational dependency for `shadcn-svelte` components, providing the underlying primitives.

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

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

### Adding Menubar Component via CLI (pnpm)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/menubar.md

This command uses the `shadcn-svelte` CLI to automatically add the Menubar component and its dependencies to your project. It's the recommended way for quick setup, streamlining the integration process.

```shell
pnpm dlx shadcn-svelte@latest add menubar
```

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

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

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/context-menu.md

This command installs 'bits-ui' as a development dependency, which is a prerequisite for the Context Menu component. It's part of the manual installation steps for projects not using the CLI.

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

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

### shadcn-svelte components.json Configuration Prompts (CLI Output)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/astro.md

This snippet displays the interactive prompts from the `shadcn-svelte` init command, guiding the user through configuring `components.json`. It covers settings like base color, global CSS file path, and import aliases for various project directories.

```text
Which base color would you like to use? › Slate\nWhere is your global CSS file? (this file will be overwritten) › src/app.css\nConfigure the import alias for lib: › $lib\nConfigure the import alias for components: › $lib/components\nConfigure the import alias for utils: › $lib/utils\nConfigure the import alias for hooks: › $lib/hooks\nConfigure the import alias for ui: › $lib/components/ui
```

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/label.md

This command installs the `bits-ui` library as a development dependency. `bits-ui` is a foundational dependency for the Label component when performing a manual installation.

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

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

### Installing bits-ui Dependency

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/command.md

This command installs `bits-ui` as a development dependency, which is a core prerequisite for the `shadcn-svelte` command component, providing foundational UI utilities.

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

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

### Installing Alert Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/alert.md

Installs the Alert component into your project using the shadcn-svelte CLI tool. This is the recommended and easiest method for adding components, automating dependency management and file placement.

```Shell
npx shadcn-svelte add alert
```

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/separator.md

This snippet shows how to manually install the 'bits-ui' dependency, which is a prerequisite for the Separator component. The '-D' flag indicates that 'bits-ui' should be installed as a development dependency.

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

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

### Installing Context Menu Component via CLI (shadcn-svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/context-menu.md

This snippet demonstrates how to add the Context Menu component to your project using the shadcn-svelte CLI tool. It simplifies the installation process by automatically adding the component and its dependencies.

```Shell
npx shadcn-svelte add context-menu
```

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

### Installing bits-ui Dependency (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/toggle-group.md

This Svelte snippet demonstrates how to install the `bits-ui` library, a prerequisite for the Toggle Group component, by utilizing the `PMInstall` component with the necessary command.

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

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

### Svelte Template for CLI Component Installation

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/select.md

This Svelte template snippet uses the `PMAddComp` component to trigger the installation of the `select` component via a package manager's CLI, typically `shadcn-svelte`'s component add command.

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

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

### Installing PaneForge Dependency Manually (npm)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/resizable.md

This snippet shows how to manually install the `paneforge` library, which is a core dependency for the `Resizable` component, using npm. The `@next` tag specifies installing the latest development version, and `-D` indicates a development dependency.

```Shell
npm install paneforge@next -D
```

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

### Installing bits-ui Dependency (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/accordion.md

This Svelte snippet utilizes the `PMInstall` component to install the `bits-ui` library, a required dependency for the Accordion component. This component typically runs a package manager install command (e.g., `npm install bits-ui`) to add the dependency to your project.

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

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

### Astro Project Configuration Questions (CLI Output)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/astro.md

This snippet shows the interactive questions asked by the Astro CLI during new project creation, including prompts for project name, template selection, TypeScript usage, dependency installation, and Git repository initialization.

```text
- Where should we create your new project?\n./your-app-name\n- How would you like to start your new project?\nChoose a starter template (or Empty)\n- Do you plan to write TypeScript?\nYes\n- How strict should TypeScript be?\nStrict\n- Install dependencies?\nYes\n- Initialize a new git repository? (optional)\nYes/No
```

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

### Installing bits-ui Dependency for Collapsible (Manual)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/collapsible.md

This step outlines how to manually install the `bits-ui` library, which is a prerequisite for the Collapsible component. It uses a package manager to add `bits-ui` as a development dependency.

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

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

### Manual Installation of Vaul Svelte Dependency

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/drawer.md

This command manually installs `vaul-svelte` as a development dependency, which is a prerequisite for the Drawer component.

```bash
npm install vaul-svelte@next -D
```

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

### Using Progress Component (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/progress.md

This example illustrates the basic usage of the 'Progress' component in a Svelte application. It shows how to import the component and set its initial progress value, demonstrating a fundamental implementation.

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

<Progress value={33} />
```

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

### Manually Installing bits-ui Dependency

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/slider.md

This command manually installs `bits-ui` as a development dependency, which is a prerequisite for the shadcn-svelte Slider component. This step is part of the manual installation process.

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

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/button.md

This snippet shows how to install `bits-ui` as a development dependency using npm, which is a prerequisite for the shadcn-svelte Button component when performing a manual installation.

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

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

### Installing Button Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/button.md

This snippet demonstrates how to add the Button component to your project using a command-line interface tool, typically a package manager or a custom component installer provided by shadcn-svelte.

```shell
npx shadcn-svelte add button
```

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

### CLI Installation of Drawer Component

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/drawer.md

This command uses the shadcn-svelte CLI to automatically add the Drawer component and its dependencies to your Svelte project.

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

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

### Installing Input OTP Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/input-otp.md

This snippet demonstrates how to add the Input OTP component to your Svelte project using the shadcn-svelte CLI tool, simplifying the installation process.

```bash
npx shadcn-svelte add input-otp
```

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

### Installing bits-ui Dependency

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/aspect-ratio.md

This command installs `bits-ui` as a development dependency, which is a prerequisite for the `aspect-ratio` component. It uses a common Node.js package manager.

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

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

### Svelte Component for CLI bits-ui Installation

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/pagination.md

This Svelte component call, used in documentation, represents the command to install `bits-ui` as a development dependency, typically `npm install bits-ui -D` or `pnpm add bits-ui -D`.

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

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/dialog.md

This command installs `bits-ui` as a development dependency, which is a foundational prerequisite for the Dialog component, enabling its core functionality.

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

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

### Creating a New SvelteKit Project

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/sveltekit.md

Uses the SvelteKit CLI to initialize a new project, serving as the first step in setting up a `shadcn-svelte` application.

```Shell
sv create my-app
```

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/switch.md

This snippet shows how to manually install the `bits-ui` library, which is a prerequisite for the Svelte Switch component. The `-D` flag indicates it's installed as a development dependency.

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

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

### Installing bits-ui Dependency for Tabs Component

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/tabs.md

This command installs `bits-ui`, a foundational library required by the Tabs component, as a development dependency in your project.

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

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

### Configuring Tailwind CSS for Custom Registry Component Paths

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/getting-started.md

This CSS snippet demonstrates how to configure Tailwind CSS to detect components placed in a custom directory, ensuring that their styles are correctly processed. It uses the `@source` directive to include the custom path, which is crucial for Tailwind to find and compile styles for components outside standard locations.

```css
@source "./registry/@acmecorp/ui-lib";
```

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/tooltip.md

This Svelte component snippet is used within the documentation to display the command for installing `bits-ui` as a development dependency. `bits-ui` is a prerequisite for the Tooltip component.

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

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

### Initializing shadcn-svelte Project

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/sveltekit.md

Executes the `shadcn-svelte` CLI initialization command, which prompts the user for configuration details to set up the component library.

```Shell
shadcn-svelte@next init
```

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

### CLI Installation of Sheet Component (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/sheet.md

This Svelte template snippet shows the usage of the `PMAddComp` component, which typically renders the CLI command to add the Sheet component to a shadcn-svelte project.

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

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

### Installing Radio Group Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/radio-group.md

This snippet demonstrates how to add the Radio Group component to your project using the `shadcn-svelte` CLI tool. It simplifies the installation process by automatically adding the necessary files and dependencies.

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

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

### Configuring Carousel Options in Svelte

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/carousel.md

This example demonstrates how to pass configuration options to the Embla Carousel instance via the `opts` prop on `Carousel.Root`. Options like `align: "start"` and `loop: true` control the carousel's behavior, such as item alignment and continuous looping.

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

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

### Installing Tooltip Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/tooltip.md

This Svelte component snippet is used within the documentation to display the command for installing the Tooltip component via the shadcn-svelte CLI. It automates the process of adding the component to your project.

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

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

### Installing Range Calendar Dependencies Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/range-calendar.md

This snippet shows how to manually install the required dependencies for the Range Calendar component. It uses a package manager's install command to add `bits-ui` and `@internationalized/date` as development dependencies, which are crucial for the component's functionality.

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

```yarn
yarn add bits-ui @internationalized/date -D
```

```pnpm
pnpm add bits-ui @internationalized/date -D
```

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

### Installing bits-ui Dependency Manually

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/alert-dialog.md

This command installs 'bits-ui' as a development dependency, which is a foundational prerequisite for shadcn-svelte components like the Alert Dialog. 'bits-ui' provides the core unstyled component logic upon which shadcn-svelte builds.

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

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

### Basic Menubar Usage in Svelte

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/menubar.md

This example demonstrates how to import and use the Menubar component in a Svelte application. It sets up a basic 'File' menu with various items and separators, showcasing the component's structure and common usage patterns.

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

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

### Installing Toggle Group via CLI (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/toggle-group.md

This Svelte snippet shows how to integrate the Toggle Group component into your project using the shadcn-svelte CLI's `PMAddComp` component, which streamlines the installation process.

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

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

### Creating a New Shadcn-Svelte Style from Scratch (JSON)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/examples.md

This JSON defines a custom style from scratch by setting 'extends: none', allowing for a completely new style definition. It includes dependencies like 'tailwind-merge' and 'clsx', along with registry dependencies for 'utils' and several core components from a remote registry. It also defines a comprehensive set of new CSS variables for 'main', 'bg', 'border', 'text', and 'ring' in both light and dark themes, applied via 'npx shadcn-svelte@next add'.

```JSON
{
  "$schema": "https://next.shadcn-svelte.com/schema/registry-item.json",
  "extends": "none",
  "name": "new-style",
  "type": "registry:style",
  "dependencies": ["tailwind-merge", "clsx"],
  "registryDependencies": [
    "utils",
    "https://example.com/r/button.json",
    "https://example.com/r/input.json",
    "https://example.com/r/label.json",
    "https://example.com/r/select.json"
  ],
  "cssVars": {
    "theme": {
      "font-sans": "Inter, sans-serif"
    },
    "light": {
      "main": "#88aaee",
      "bg": "#dfe5f2",
      "border": "#000",
      "text": "#000",
      "ring": "#000"
    },
    "dark": {
      "main": "#88aaee",
      "bg": "#272933",
      "border": "#000",
      "text": "#e6e6e6",
      "ring": "#fff"
    }
  }
}
```

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

### Defining Simple CSS Utility (JSON)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/examples.md

This JSON configuration defines a simple CSS utility class, `content-auto`, using the `@utility` directive. This utility sets the `content-visibility` property to `auto`, which can be used to optimize rendering performance by skipping layout and painting of off-screen content.

```JSON
{
  "$schema": "https://next.shadcn-svelte.com/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "css": {
    "@utility content-auto": {
      "content-visibility": "auto"
    }
  }
}
```

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

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

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/avatar.md

This Svelte snippet utilizes the `PMInstall` component to generate and display the package manager command for installing `bits-ui` as a development dependency, a prerequisite for the Avatar component.

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

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

### Manually Installing Embla Carousel Svelte

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/carousel.md

This Svelte component call represents the command for installing the `embla-carousel-svelte` library as a development dependency. It is part of the manual installation process, which also requires copying component source files.

```svelte
<PMInstall command="embla-carousel-svelte -D" />
```

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

### Rendering a Basic Table with shadcn-svelte Components

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/table.md

This example illustrates how to structure and render a basic data table using the imported shadcn-svelte 'Table' components. It includes a caption, header with columns, and a body with a sample row and cells.

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

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

### CLI Installation Command for Checkbox (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/checkbox.md

This Svelte snippet represents the command-line installation step for the `checkbox` component using a custom `PMAddComp` component. This component likely abstracts a package manager command (e.g., `npx shadcn-svelte add checkbox`) to add the component's source files to the project.

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

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

### Installing bits-ui Dependency Manually for Dropdown Menu

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/dropdown-menu.md

This Svelte snippet represents the command to manually install `bits-ui` as a development dependency. `bits-ui` is a core prerequisite for the `shadcn-svelte` Dropdown Menu component, providing the underlying headless UI logic.

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

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

### Installing Textarea Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/textarea.md

Installs the Textarea component using the shadcn-svelte CLI. This command automates the process of adding the component's source files and dependencies to your Svelte project, ensuring proper integration.

```Shell
npx shadcn-svelte add textarea
```

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

### Creating a New Svelte Project with sv CLI (Bash)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/v4/README.md

This snippet demonstrates how to initialize a new Svelte project using the `npx sv create` command. Users can either create a project in the current directory or specify a new directory name for the project. This is the initial step for setting up a Svelte application.

```Bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

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

### Adding Skeleton Component via CLI (shadcn-svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/skeleton.md

This command uses the shadcn-svelte CLI to automatically add the Skeleton component's source files and dependencies to your project, streamlining the installation process.

```Shell
npx shadcn-svelte add skeleton
```

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

### Installing Progress Component via CLI (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/progress.md

This snippet demonstrates how to add the 'Progress' component to your Svelte project using a command-line interface tool, typically part of the shadcn-svelte ecosystem. It simplifies the component integration process.

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

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

### Manually Install Calendar Dependencies

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/calendar.md

Install the core dependencies, bits-ui and @internationalized/date, as development dependencies using npm, which are essential for the Calendar component's functionality.

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

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

### Options for shadcn-svelte init command

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/cli.md

This snippet lists the available command-line options for the `shadcn-svelte init` command. These options allow for non-interactive configuration of the project initialization process, such as specifying the working directory, base color, CSS file path, and import aliases.

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

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

### Configuring Vite Path Aliases

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/manual.md

This JavaScript snippet illustrates how to configure `vite.config.ts` to set up path aliases for Vite, enabling module resolution for paths like `$lib` during development and build processes, which is crucial for large projects.

```JavaScript
import path from "path";

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

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

### Adding Dialog Component via shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/dialog.md

This command utilizes the shadcn-svelte CLI to automatically add the Dialog component's source files and necessary dependencies to your project, streamlining the setup process.

```Shell
npx shadcn-svelte add dialog
```

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

### Configuring shadcn-svelte components.json via CLI Prompts

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/vite.md

This text snippet illustrates the interactive command-line prompts encountered when running `shadcn-svelte@next init`. It shows the typical questions asked, such as base color, global CSS file path, and import aliases for `lib`, `components`, `utils`, `hooks`, and `ui`, which configure the `components.json` file.

```Text
Which base color would you like to use? › Slate
Where is your global CSS file? (this file will be overwritten) › src/app.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
```

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

### Basic Dialog Component Usage in Svelte

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/dialog.md

This Svelte example demonstrates the fundamental structure for implementing a dialog, importing components from `$lib/components/ui/dialog` and composing them to create an interactive modal window with a trigger, header, title, and description.

```Svelte
<script lang="ts">\n  import * as Dialog from "$lib/components/ui/dialog/index.js";\n</script>\n\n<Dialog.Root>\n  <Dialog.Trigger>Open</Dialog.Trigger>\n  <Dialog.Content>\n    <Dialog.Header>\n      <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>\n      <Dialog.Description>\n        This action cannot be undone. This will permanently delete your account\n        and remove your data from our servers.\n      </Dialog.Description>\n    </Dialog.Header>\n  </Dialog.Content>\n</Dialog.Root>
```

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

### Defining a Custom Shadcn-Svelte Block (JSON)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/registry/examples.md

This JSON defines a 'registry:block' item for shadcn-svelte, specifically the 'login-01' block. It includes a description, lists required registry dependencies like 'button', 'card', 'input', and 'label', and specifies the files that comprise the block, including their paths, content types, and target locations within the project structure.

```JSON
{
  "$schema": "https://next.shadcn-svelte.com/schema/registry-item.json",
  "name": "login-01",
  "type": "registry:block",
  "description": "A simple login form.",
  "registryDependencies": ["button", "card", "input", "label"],
  "files": [
    {
      "path": "blocks/login-01/page.svelte",
      "content": "import { LoginForm } ...",
      "type": "registry:page",
      "target": "src/routes/login/+page.svelte"
    },
    {
      "path": "blocks/login-01/components/login-form.svelte",
      "content": "...",
      "type": "registry:component"
    }
  ]
}
```

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

### Adding Specific shadcn-svelte Components (Bash)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/packages/cli/README.md

This command adds a specified shadcn-svelte component to your project, automatically installing all its required dependencies. Replace `[component]` with the actual component name you wish to add.

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

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

### Add Calendar Component via shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/calendar.md

Use the shadcn-svelte CLI to automatically add the Calendar component's source files and dependencies to your project, streamlining the setup process.

```CLI
npx shadcn-svelte add calendar
```

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

### Basic Usage of Select Component in Svelte

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/select.md

This Svelte snippet demonstrates the fundamental structure for using the `Select` component, including importing its sub-components and defining a single-selection dropdown with example options.

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

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

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

### Adding Avatar Component via CLI (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/avatar.md

This Svelte snippet uses the `PMAddComp` component to generate and display the command for adding the `avatar` component using the `shadcn-svelte` CLI, streamlining the installation process.

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

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

### Configuring TypeScript Path Aliases

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/installation/manual.md

This JSON snippet shows how to configure `tsconfig.json` to define path aliases for TypeScript, ensuring that the TypeScript compiler correctly resolves module imports like `$lib` and `$lib/*` for improved development experience.

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

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

### Installing Carousel Component via CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/carousel.md

This Svelte component call represents the command-line interface (CLI) method for adding the Carousel component to a project. It abstracts the underlying package manager command, simplifying the installation process.

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

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

### Example Form Field Implementation (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/form.md

This example demonstrates a concrete implementation of a form field for an 'email' input using Formsnap and Superforms. It shows how to bind form data, use the `use:enhance` action for progressive enhancement, and integrate a standard `Input` component within the `Form.Control`.

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

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

### Listing Available shadcn-svelte Components (Bash)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/packages/cli/README.md

Running the `add` command without any arguments displays a comprehensive list of all available shadcn-svelte components that can be added to your project. This is useful for discovering components.

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

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

### Installing Breadcrumb Component via CLI (Svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/breadcrumb.md

This Svelte snippet demonstrates how to install the Breadcrumb component using the project's CLI utility. The <PMAddComp /> component, when rendered, executes or displays the command to add the 'breadcrumb' component to your Svelte project.

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

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

### Basic Usage of Svelte Card Component

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/card.md

This example demonstrates the fundamental structure and usage of the Svelte Card component. It shows how to import the component and utilize its nested elements such as `Card.Root`, `Card.Header`, `Card.Title`, `Card.Description`, `Card.Content`, and `Card.Footer` to construct a complete card UI.

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

<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card Description</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Card Content</p>
  </Card.Content>
  <Card.Footer>
    <p>Card Footer</p>
  </Card.Footer>
</Card.Root>
```

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

### Basic Usage of Svelte Carousel Component

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/carousel.md

This example demonstrates the fundamental structure for using the Carousel component. It imports the necessary modules and sets up a basic carousel with content items and navigation buttons (Previous/Next).

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

<Carousel.Root>
  <Carousel.Content>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
  </Carousel.Content>
  <Carousel.Previous />
  <Carousel.Next />
</Carousel.Root>
```

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

### Installing mode-watcher package

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/dark-mode/svelte.md

Installs the `mode-watcher` package using npm, which is essential for enabling dark mode functionality in a Svelte project. This package provides the necessary components and utilities for theme management.

```Shell
npm install mode-watcher@0.5.1
```

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

### Svelte Component for CLI Pagination Installation

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/pagination.md

This Svelte component call, typically used within documentation, represents the command to add the `pagination` component to a project using a CLI tool like `shadcn-svelte add`.

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

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

### Installing Collapsible Component via CLI (shadcn-svelte)

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.16/sites/docs/src/content/components/collapsible.md

This snippet demonstrates how to add the Collapsible component to a Svelte project using the shadcn-svelte CLI. It automates the process of adding the component's files and dependencies.

```Shell
npx shadcn-svelte add collapsible
```