### Installing Registry Item with shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.19/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 and the full URL to the registry item.

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

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

### Example Svelte Component for Registry

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

This Svelte component, `<HelloWorld />`, serves as an example of a simple component to be added to the registry. It imports a `Button` component and renders 'Hello World' inside it, demonstrating a basic UI element.

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

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

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

### Configuring Astro Project Setup (CLI)

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

This snippet shows the interactive command-line prompts and expected responses when initializing a new Astro project, guiding the user through project name, template selection, TypeScript configuration, dependency installation, and Git initialization.

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

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

### Installing bits-ui Dependency for Manual Setup

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

This snippet shows how to install the `bits-ui` library, a required dependency for the Toggle component, using npm. This is the first step in the manual installation process.

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

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

### Installing bits-ui for Manual Progress Component Setup

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

This command installs `bits-ui` as a development dependency, which is a foundational prerequisite for manually setting up the shadcn-svelte Progress component. It ensures the core utilities are available for the component.

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

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

### Registry Component Directory Structure

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

This text snippet illustrates the recommended directory structure for placing components within the registry. It shows a `registry` root directory containing a `hello-world` subdirectory, which in turn holds the `hello-world.svelte` component file.

```Plaintext
registry
└── hello-world
    └── hello-world.svelte
```

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

### Initial registry.json Configuration

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

This JSON snippet demonstrates the basic structure for the `registry.json` file, which is essential for the `shadcn-svelte` CLI. It includes the schema reference, registry name, homepage, and an empty `items` array to be populated with component definitions.

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

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

### Installing Skeleton Component via Shadcn-Svelte CLI

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

Installs the `skeleton` component into your project using the `shadcn-svelte` command-line interface. This command automatically adds the necessary component files and configurations, streamlining the setup process.

```shell
npx shadcn-svelte add skeleton
```

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

### Installing Toggle Component via shadcn-svelte CLI

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

This snippet demonstrates how to install the Toggle component using the shadcn-svelte CLI. This command automatically adds the component's source files to your project, simplifying setup.

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

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

### Installing Label Component via CLI

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

Installs the `Label` component using the `shadcn-svelte` CLI, which automatically adds the necessary files and dependencies to your project, simplifying the setup process.

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

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

### Adding Component Definition to registry.json

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

This JSON snippet shows how to add a component definition, specifically for 'hello-world', to the `items` array in `registry.json`. It includes metadata like name, type, title, description, and an array of files with their paths and types, linking the component to the registry.

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

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

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

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

This snippet demonstrates how to install the Breadcrumb component using the `PMAddComp` command-line utility provided by shadcn-svelte. This is the recommended method for quick setup and integrates the component into your project.

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

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

### Installing Dialog Component via CLI

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

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

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

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

### Adding Registry Build Script to package.json

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

This JSON snippet demonstrates how to add a `registry:build` script to the `scripts` section of `package.json`. This script uses `pnpm` to execute the `shadcn-svelte registry build` command, automating the process of generating registry JSON files.

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

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

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

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

This snippet shows how to use the `PMAddComp` Svelte component to add the `dropdown-menu` component to your project using the `shadcn-svelte` CLI. This method automates the setup process, including copying necessary files.

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

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

### Manual Installation of bits-ui Dependency

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

This command installs 'bits-ui' as a development dependency, which is a prerequisite for the manual setup of the Switch component. 'bits-ui' provides the underlying logic and accessibility features for the component.

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

```bash
pnpm install bits-ui -D
```

```bash
yarn add bits-ui -D
```

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

### Installing bits-ui Dependency Manually

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

This snippet shows how to install the `bits-ui` library as a development dependency using the `PMInstall` utility, which executes a package manager command like `npm install` or `pnpm add`. This is a prerequisite for manual component setup.

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

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

### Installing Block and Overriding Primitives (JSON)

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

This JSON configuration defines a `registry:block` item named `custom-login`. It specifies `login-01` as a dependency and overrides default `button`, `input`, and `label` primitives by referencing custom component URLs from an example registry. This allows for integrating pre-built blocks while using custom-styled base 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 Menubar Component via shadcn-svelte CLI

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.19/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 simplifies the installation process by handling file copying and configuration, making it the recommended approach for quick setup.

```Shell
npx shadcn-svelte add menubar
```

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

### CLI Installation of Switch Component

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

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

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

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

### Starting Svelte Development Server (Bash)

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

This snippet provides commands to start the development server for a Svelte application after dependencies are installed. It includes the basic command to run the server and an option to automatically open the application in a new browser tab, facilitating local 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 Aspect Ratio Component via CLI

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

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

```shell
npx shadcn-svelte add aspect-ratio
```

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

### Installing Slider Component via CLI

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

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

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

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

### Installing Button Component via CLI

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

This command adds the Button component to your project using the shadcn-svelte CLI, automating the setup process.

```Shell
npx shadcn-svelte add button
```

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

### Installing Pagination Component via shadcn-svelte CLI

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

This command uses the `shadcn-svelte` CLI to automatically add the Pagination component to your project, handling necessary file creation and dependency setup.

```Shell
npx shadcn-svelte add pagination
```

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

### Initializing Shadcn-Svelte Project - CLI

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

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

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

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

### Installing Tooltip Component via CLI

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

This snippet demonstrates how to install the Tooltip component using the `shadcn-svelte` CLI, which automates the process of adding the component's files to your project.

```shell
npx shadcn-svelte add tooltip
```

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

### Installing Sheet Component via CLI

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

This snippet demonstrates how to install the Sheet UI component using the shadcn-svelte CLI tool. This command automates the process of adding the component's source files and necessary dependencies to your project, simplifying setup.

```Shell
npx shadcn-svelte add sheet
```

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

### Manual Installation: Installing bits-ui Dependency

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

This step manually installs the `bits-ui` library as a development dependency, which is a prerequisite for the `AspectRatio` component. Following this, you would copy the component's source files into your project.

```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.19/sites/docs/src/content/components/input-otp.md

Installs the `bits-ui` library as a development dependency, which is a prerequisite for the Input OTP component.

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

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

### Installing Avatar Component via shadcn-svelte CLI

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

This snippet demonstrates how to quickly add the Avatar component to your project using the shadcn-svelte command-line interface, automating the setup process.

```Shell
npx shadcn-svelte add avatar
```

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

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

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

This command adds the Checkbox component to your project using the shadcn-svelte CLI, automating the setup process by fetching and configuring the necessary files.

```shell
npx shadcn-svelte add checkbox
```

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

### Manual Installation Steps for Badge Component (Svelte)

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

This Svelte snippet outlines the manual installation process for the `Badge` component, instructing users to copy source files. It uses the `Steps` component to structure the documentation.

```Svelte
<Steps>\n\n### Copy and paste the component source files linked at the top of this page into your project.\n\n</Steps>
```

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

### Adding Calendar Component via shadcn-svelte CLI

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

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

```Shell
npx shadcn-svelte add calendar
```

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

### Installing Shadcn Svelte Progress Component via CLI

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

This command uses the shadcn-svelte CLI to automatically add the Progress component to your project, including its dependencies and necessary configurations. It simplifies the setup process by handling file copying and dependency management.

```Shell
npx shadcn-svelte add progress
```

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

### Installing bits-ui Dependency for Navigation Menu (Manual)

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

This step outlines the manual installation of `bits-ui`, a core prerequisite for the Navigation Menu component. It uses a package manager command to install `bits-ui` as a development dependency.

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

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

### Installing Toggle Group Component via CLI

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

This snippet demonstrates how to add the Toggle Group component to your project using the shadcn-svelte CLI, which automates the setup process by fetching and configuring the component files.

```shell
npx shadcn-svelte add toggle-group
```

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

### Installing Command Component using CLI

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

This snippet demonstrates how to install the Command component using the `shadcn-svelte` CLI tool. It adds the component's source files to your project, allowing for easy customization and local modification.

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

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

### Installing bits-ui Dependency Manually

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

This step outlines the manual installation of `bits-ui`, a prerequisite for the Slider component. It installs `bits-ui` as a development dependency and instructs to manually copy component source files.

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

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

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

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

This snippet demonstrates how to initialize a new Svelte project using the `sv` command-line interface. It shows commands for creating a project in the current directory or within a specified new directory, serving as the initial setup step for 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
```

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

### Installing bits-ui Dependency

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

Installs the `bits-ui` library as a development dependency using npm, which is a foundational prerequisite for the `Select` component.

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

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

### Configuring JavaScript Import Aliases - JSON

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

Example `jsconfig.json` configuration for JavaScript projects to define import aliases. This specific alias maps `$lib/*` to `./src/lib/*`, allowing cleaner imports for modules within the `src/lib` directory.

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

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

### Installing bits-ui Dependency for Pagination

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

This command installs `bits-ui` as a development dependency, which is a foundational prerequisite for the `shadcn-svelte` Pagination component when installed manually.

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

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

### Adding Select Component via shadcn-svelte CLI

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

Uses the `shadcn-svelte` CLI to automatically add the `select` component and its dependencies to your project, streamlining the setup process.

```shell
npx shadcn-svelte add select
```

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

### Manual Installation of Tabs Component Dependencies

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

This Svelte snippet demonstrates using the `PMInstall` component to install the `bits-ui` dependency, a prerequisite for the Tabs component, as part of the manual installation steps. This component typically executes a package manager command like `npm install 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.19/sites/docs/src/content/components/tooltip.md

This snippet shows how to manually install `bits-ui` as a development dependency, which is a prerequisite for the Tooltip component.

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

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

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

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

This snippet demonstrates how to install the Context Menu component using the `shadcn-svelte` CLI. It automates the process of adding the component files to your project.

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

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

### Installing bits-ui Dependency Manually

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

This command installs `bits-ui` as a development dependency, which is a foundational prerequisite for the Menubar component when performing a manual installation. It provides the core UI primitives required by the component.

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

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

### Shadcn-Svelte Init Command Options - CLI

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

This section lists the available command-line options for the `shadcn-svelte init` command, allowing users to customize the initialization process. Options include specifying the working directory, overwriting files, disabling dependency installation, setting base color, and configuring various import aliases directly.

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

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

### Installing bits-ui Dependency (Manual)

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

This step demonstrates using the `PMInstall` Svelte component to install `bits-ui` as a development dependency. `bits-ui` is a foundational library required by the `shadcn-svelte` Dropdown Menu component.

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

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

### Adding Alert Dialog Component Example - Bash

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

This is a practical example of using the `add` command to integrate a specific component, the `alert-dialog`, into your project. It demonstrates how to provide the component name as an argument to the command.

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

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

### Installing bits-ui Dependency Manually

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

This command installs `bits-ui` as a development dependency using npm, which is a core prerequisite for the Dialog component when performing a manual installation.

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

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

### Initializing shadcn-svelte Project - Bash

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.19/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 essential first step for integrating shadcn components into a Svelte application.

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

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

### Tailwind CSS Source Configuration for Registry

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.19/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 within the registry. The `@source` directive is used to include the specified path, ensuring Tailwind can process styles for components located there.

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

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

### Installing Input Component using PMAddComp

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

Utilizes the `PMAddComp` Svelte component to facilitate the installation of the `Input` component, typically rendering a command-line instruction for a package manager or component CLI.

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

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

### Installing bits-ui Dependency for Context Menu (Manual)

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

This step outlines the manual installation of `bits-ui`, a core dependency for the Context Menu component. It uses a common package manager command to add the dependency.

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

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

### Configuring shadcn-svelte components.json (CLI)

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

This snippet displays the interactive prompts from the `shadcn-svelte` initialization command, guiding the user to define base color, global CSS path, and import aliases for various component categories, which are then saved to `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
```

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

### Defining Custom Block for shadcn-svelte (JSON)

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

This JSON defines a custom block named `login-01` for `shadcn-svelte`, described as 'A simple login form.' It lists required registry dependencies such as `button`, `card`, `input`, and `label`. The block's structure is defined by an array of files, specifying their `path`, `content` (simplified for brevity), `type` (e.g., `registry:page`, `registry:component`), and `target` location within the project, enabling the CLI to install and configure the block correctly.

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

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

### Initializing shadcn-svelte CLI (Shell)

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

This command runs the shadcn-svelte CLI initialization process. It guides the user through a series of questions to configure `components.json`, setting up paths for global CSS, components, utilities, and UI elements, which is crucial for component management.

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

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

### Manual Installation of bits-ui Dependency

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

This snippet outlines the manual installation process for the `bits-ui` library, a core dependency for the Sheet component. After installing `bits-ui` as a development dependency, users must manually copy the Sheet component's source files into their project.

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

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

### Installing Alert Dialog Component via CLI (Svelte)

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

This snippet demonstrates how to install the Alert Dialog component using the project's command-line interface (CLI) tool. It utilizes a Svelte component to execute the installation command, adding the component to your project's UI registry.

```Svelte
<PMAddComp name="alert-dialog" />
```

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

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

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

This snippet demonstrates how to install the Card component using the shadcn-svelte CLI. This command automatically adds the necessary component files and dependencies to your Svelte project.

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

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

### Installing Badge Component via CLI (Svelte)

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

This Svelte snippet shows the usage of the `PMAddComp` component, which abstracts the command-line interface (CLI) installation process for the `Badge` component in a shadcn-svelte project.

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

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

### Installing bits-ui Dependency Manually

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

Installs `bits-ui` as a development dependency, which is a core prerequisite for the `Label` component. This step is part of the manual installation process, requiring you to copy component source files separately.

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

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

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

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

### Installing Alert Component via CLI (Shell)

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

Demonstrates how to install the Alert component using the shadcn-svelte CLI. This command adds the necessary files to your project, allowing for quick integration.

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

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

### Installing bits-ui Dependency Manually

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

This command installs `bits-ui` as a development dependency, which is a prerequisite for the Checkbox component. After installation, users are instructed to manually copy the component source files into their project.

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

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

### Basic Usage of Command Component in Svelte

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

This example demonstrates the fundamental structure for using the Command component. It imports the necessary modules and sets up a basic command menu with an input, list, empty state, groups, and items for user interaction.

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

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

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

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

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

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

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

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

### Providing Custom Documentation for Registry Item in JSON

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

This property allows developers to include custom documentation or a specific message that will be displayed to the user when the registry item is installed via the CLI. It's useful for providing important setup instructions or reminders.

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

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

### Installing Popover Component via CLI - Bash

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

This snippet demonstrates how to install the Popover component using the `shadcn-svelte` CLI tool. It automates the process of adding the component's files to your project.

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

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

### ESLint Flat Configuration for Svelte Components - JavaScript

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

An example of an ESLint flat configuration (`eslint.config.js`) for Svelte projects. It defines specific rules for Svelte files, including a rule override for `@typescript-eslint/no-unused-vars` to ignore Svelte's special `$$` variables within `components/ui` directories, preventing linting errors.

```JavaScript
/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
  /* ... */
  {
    files: ["**/*.svelte"],
    languageOptions: {
      parserOptions: {
        parser: ts.parser,
      },
    },
  },
  {
    /* location of your components where you would like to apply these rules  */
    files: ["**/components/ui/**/*.svelte"],
    rules: {
      "@typescript-eslint/no-unused-vars": [
        "warn",
        {
          argsIgnorePattern: "^",
          varsIgnorePattern: "^\\$\$(Props|Events|Slots|Generic)$",
        },
      ],
    },
  },
];
```

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

### Shadcn-Svelte Add Command Options - CLI

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

This section outlines the various command-line options available for the `shadcn-svelte add` command. These options allow for fine-grained control over the component addition process, such as skipping dependency installation, adding all components, bypassing confirmation prompts, 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 bits-ui Dependency via PMInstall (Svelte)

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

This Svelte snippet demonstrates using the custom `PMInstall` component to install `bits-ui` as a development dependency, abstracting common package manager commands like `npm install bits-ui -D`.

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

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

### Installing bits-ui Dependency

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

Installs `bits-ui` as a development dependency, which is a prerequisite for the shadcn-svelte Button component.

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

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

### Starting Development Server to Verify Upgrade

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

This command starts the development server, allowing developers to verify that all styles and functionalities are working as expected after upgrading to Tailwind v4 and integrating it with Vite.

```Shell
npm run dev
```

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

### Install bits-ui Dependency via CLI

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

This command installs `bits-ui` as a development dependency using npm, which is a required prerequisite for the `Separator` component.

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

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

### Installing bits-ui Dependency Manually

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

This snippet shows the commands to install `bits-ui` as a development dependency, which is a core prerequisite for manually integrating shadcn-svelte components into your project.

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

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

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

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

### Adding Input OTP Component via CLI

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

Installs the Input OTP component using the shadcn-svelte CLI, which automatically adds the necessary files to your project.

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

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

### Installing bits-ui Dependency Manually

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

This step outlines the manual installation of `bits-ui`, a prerequisite library for the Accordion component. It uses a package manager to add `bits-ui` to the project dependencies.

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

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

### Installing bits-ui Dependency Manually

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

This snippet shows how to install `bits-ui` as a development dependency, which is a prerequisite for the Command component. It uses a package manager command to add the library to your project's `devDependencies`.

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

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

### CLI Installation of Tabs Component

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

This Svelte snippet shows the use of the `PMAddComp` component to add the Tabs component via the project's CLI, simplifying the installation process. This component typically executes a command like `npx shadcn-svelte add tabs`.

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

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

### Installing bits-ui Dependency Manually

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

This command installs 'bits-ui' as a development dependency, which is a prerequisite for manually setting up the Avatar component and other 'bits-ui' based components.

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

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

### Installing bits-ui Dependency Manually - Bash

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

This command installs `bits-ui` as a development dependency, which is a prerequisite for the Popover component. `bits-ui` provides the underlying unstyled components.

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

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

### Example Svelte Component with Internal Aliases

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

This Svelte code snippet demonstrates how a component might use internal import aliases (e.g., `@/lib`) within its script block. These aliases are crucial for defining the `aliases` property in `registry.json` to ensure proper path transformation during component installation.

```svelte
<script lang="ts">
  import { Button } from "@/lib/registry/ui/button/index.js";
  import { cn } from "@/lib/utils.js";
</script>
```

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

### Shadcn-Svelte Init Configuration Prompts - CLI

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

During the `init` command execution, the CLI interactively prompts the user for configuration details, including base color, global CSS file path, and import aliases for various project directories like `lib`, `components`, `utils`, `hooks`, and `ui`.

```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 Calendar Dependencies Manually

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

This step involves installing the core dependencies, 'bits-ui' and '@internationalized/date', required for the Calendar component. After running this command, you will need to manually copy the component's source files into your project.

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

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

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

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

### Basic Usage of Svelte Input Component

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

Demonstrates the basic usage of the Svelte Input component. It shows how to import the `Input` component from the library and render it within a Svelte template, providing a minimal functional example.

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

<Input />
```

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

### Rendering CLI Installation Command for Textarea (Svelte)

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

This Svelte component call is used within the documentation to display the command-line interface instruction for adding the `textarea` component to a `shadcn-svelte` project.

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

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

### Installing vaul-svelte Dependency Manually

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

This command installs the `vaul-svelte` library as a development dependency using a package manager. This library is a core prerequisite for the Drawer component, providing its underlying functionality.

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

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

### Listing Available shadcn-svelte Components - Bash

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

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

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

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

### Installing Embla Carousel Svelte Manually (Svelte)

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

This snippet shows how to manually install the `embla-carousel-svelte` library, which is a core dependency for the `shadcn-svelte` Carousel component. It specifies installing it as a development dependency.

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

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

### Defining Custom Style from Scratch in shadcn-svelte (JSON)

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

This JSON defines a custom style for `shadcn-svelte` from scratch by setting `extends: none`. It specifies core dependencies like `tailwind-merge` and `clsx`, includes the `utils` registry item, and integrates remote components such as `button`, `input`, `label`, and `select`. Furthermore, it defines a comprehensive set of new CSS variables (`main`, `bg`, `border`, `text`, `ring`) for both light and dark themes, designed for use with `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"
    }
  }
}
```

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

### Installing Resizable Component via CLI - Svelte

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

This snippet demonstrates how to install the `Resizable` component using a command-line interface (CLI) helper component. It simplifies the process of adding the component to your Svelte project by abstracting the underlying package manager commands.

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

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

### Installing bits-ui Dependency Manually

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

This command installs `bits-ui` as a development dependency, which is a prerequisite for using the shadcn-svelte Toggle Group component and other UI primitives.

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

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

### Installing Radio Group Component via CLI

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

This snippet demonstrates how to add the Radio Group component to your project using the `PMAddComp` utility, which typically wraps a CLI command for component installation. This is the recommended way to add `shadcn-svelte` components.

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

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

### Installing ScrollArea Component via CLI

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

This snippet demonstrates how to add the `ScrollArea` component to your project using the `shadcn-svelte` CLI command, simplifying the installation process.

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

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

### Installing Carousel Component via CLI (Svelte)

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

This snippet demonstrates how to add the `shadcn-svelte` Carousel component to your project using a command-line interface tool. It simplifies the installation process by automatically adding the necessary files and dependencies.

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

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

### Installing Tailwind Vite Plugin

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

This command installs the `@tailwindcss/vite` plugin as a development dependency, which is the recommended way to integrate Tailwind v4 with Vite-based projects.

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

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

### Installing Table Component via CLI in Svelte

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

This Svelte snippet utilizes the `PMAddComp` component, which is designed to abstract and execute the command-line interface (CLI) command for adding the Table component to your project.

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

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

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

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

This snippet shows how to install the `bits-ui` dependency, which is a prerequisite for the Alert Dialog component, using a package manager. The Svelte component `PMInstall` is used to represent the command, with the `-D` flag indicating it's a development dependency.

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

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

### Creating Basic Sidebar Component in Svelte

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

This Svelte component defines the basic structure of the application sidebar. It imports `Sidebar` components and uses `Sidebar.Root` as the main container, with `Sidebar.Content` nested inside to hold the actual sidebar content. This serves as the foundational setup for the sidebar.

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

<Sidebar.Root>
  <Sidebar.Content />
</Sidebar.Root>
```

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

### Defining a Registry Item - Full Example

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

This comprehensive example demonstrates the full structure of a `registry-item.json` file, used to define custom registry items for shadcn-svelte. It includes properties like name, title, type, description, file paths, and CSS variables for theming.

```json
{
  "$schema": "https://next.shadcn-svelte.com/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "A simple hello world component.",
  "files": [
    {
      "path": "registry/hello-world/hello-world.svelte",
      "type": "registry:component"
    },
    {
      "path": "registry/hello-world/use-hello-world.svelte.ts",
      "type": "registry:hook"
    }
  ],
  "cssVars": {
    "theme": {
      "font-heading": "Poppins, sans-serif"
    },
    "light": {
      "brand": "20 14.3% 4.1%"
    },
    "dark": {
      "brand": "20 14.3% 4.1%"
    }
  }
}
```

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

### Installing bits-ui Dependency Manually

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

This step outlines how to install the `bits-ui` library, a prerequisite for the `ScrollArea` component, using npm. The `-D` flag indicates it's a development dependency.

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

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

### Defining Simple CSS Utility (JSON)

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

This JSON configuration defines a `registry:component` item named `custom-component`. It adds a simple custom CSS utility `@utility content-auto` which sets `content-visibility` to `auto`. This allows for creating custom utility classes that can be applied directly in markup.

```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 PaneForge Dependency Manually - Svelte

Source: https://github.com/huntabyte/shadcn-svelte/blob/shadcn-svelte@1.0.0-next.19/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. It uses a Svelte component to encapsulate the package manager command, specifying the `@next` tag for the latest development version and `-D` for a development dependency.

```Svelte
<PMInstall command="paneforge@next -D" />
```

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

### Install Range Calendar Dependencies Manually

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

This command installs the required `bits-ui` and `@internationalized/date` packages as development dependencies, which are fundamental for the Range Calendar component's functionality.

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

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

### Configuring TypeScript Path Aliases - JSON

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

This JSON snippet shows how to configure path aliases in `tsconfig.json` for projects not using SvelteKit. It maps `$lib` and `$lib/*` to the `./src/lib` directory, allowing for cleaner, absolute imports within the project.

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

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

### Adding Drawer Component via CLI

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

This command adds the Drawer component and its dependencies to your Svelte project using the shadcn-svelte CLI, streamlining the setup process by automating file copying and configuration.

```CLI
npx shadcn-svelte add drawer
```

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

### Adding Specific shadcn-svelte Component - Bash

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

This command adds a specified shadcn-svelte component to your project, automatically installing any required dependencies. Replace `[component]` with the exact name of the desired component to integrate it into your codebase.

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

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

### Add Separator Component via CLI

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

This command uses the shadcn-svelte CLI to automatically add the `Separator` component's source files to your project, simplifying the setup process.

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

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

### Installing Accordion Component via CLI

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

This snippet demonstrates how to add the Accordion component to your Svelte project using the shadcn-svelte CLI. It automates the process of copying the component files and setting up dependencies.

```shell
npx shadcn-svelte add accordion
```

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

### Configuring Proxy for Shadcn-Svelte CLI - Bash

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

This example demonstrates how to configure a proxy for `shadcn-svelte` CLI commands by setting the `HTTP_PROXY` environment variable. This allows the CLI to fetch items from the registry through a specified proxy server, which is useful in restricted network environments.

```bash
HTTP_PROXY="<proxy-url>" npx shadcn-svelte@next init
```

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

### Basic Usage of Sidebar.Root Component in Svelte

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

This Svelte snippet shows the minimal setup required to render the main `Sidebar.Root` component. It imports the `Sidebar` module and then renders the root component, which provides a collapsible sidebar.

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

<Sidebar.Root />
```

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

### Importing Global Styles into Svelte Layout

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

This Svelte snippet demonstrates how to import the global CSS file (`app.css`) into the main application layout component (`+layout.svelte`). This ensures that the defined styles, including the CSS variables and base styles, are applied consistently across all pages of the Svelte application.

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

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

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

### Importing and Using shadcn-svelte Button in Astro (Astro)

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

This Astro snippet demonstrates how to import the `Button` component from `shadcn-svelte` within an Astro page's frontmatter and then render it in the HTML body, showcasing basic component usage after setup.

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

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

### Defining Custom Theme Variables (JSON)

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

This JSON configuration defines a `registry:theme` item named `custom-theme`. It adds custom CSS variables like `font-heading` and `shadow-card` to the `theme` object, allowing for global styling adjustments within the `shadcn-svelte` theming system.

```json
{
  "$schema": "https://next.shadcn-svelte.com/schema/registry-item.json",
  "name": "custom-theme",
  "type": "registry:theme",
  "cssVars": {
    "theme": {
      "font-heading": "Inter, sans-serif",
      "shadow-card": "0 0 0 1px rgba(0, 0, 0, 0.1)"
    }
  }
}
```

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

### Configuring Custom Style Extending shadcn-svelte (JSON)

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

This JSON defines a custom style for `shadcn-svelte` that extends the base framework. It specifies external dependencies like `phosphor-svelte`, includes existing registry items such as `login-01` and `calendar`, and integrates a remote `editor` block. Additionally, it sets a custom font (`Inter, sans-serif`) and defines a `brand` color for both light and dark modes, intended for use with `npx shadcn-svelte@next init`.

```JSON
{
  "$schema": "https://next.shadcn-svelte.com/schema/registry-item.json",
  "name": "example-style",
  "type": "registry:style",
  "dependencies": ["phosphor-svelte"],
  "registryDependencies": [
    "login-01",
    "calendar",
    "https://example.com/r/editor.json"
  ],
  "cssVars": {
    "theme": {
      "font-sans": "Inter, sans-serif"
    },
    "light": {
      "brand": "oklch(0.145 0 0)"
    },
    "dark": {
      "brand": "oklch(0.145 0 0)"
    }
  }
}
```