> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# shadcn-svelte

> Accessible and customizable Svelte components built with Bits UI and Tailwind CSS.

<img className="block" src="https://raw.githubusercontent.com/huntabyte/shadcn-svelte/main/docs/static/opengraph-image.png" alt="shadcn-svelte Hero" />

## Build Your Component Library

An unofficial, community-led [Svelte](https://svelte.dev) port of [shadcn/ui](https://ui.shadcn.com). **This is not a component library. It is how you build your component library.**

Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. Use this to build your own component library.

<CardGroup cols={2}>
  <Card title="Get Started" icon="rocket" href="/introduction">
    Learn about shadcn-svelte and its core principles
  </Card>

  <Card title="Installation" icon="download" href="/installation/index">
    Install shadcn-svelte in your project
  </Card>

  <Card title="Components" icon="grid" href="/components/accordion">
    Browse 50+ accessible UI components
  </Card>

  <Card title="CLI" icon="terminal" href="/cli">
    Use the CLI to add components to your project
  </Card>
</CardGroup>

## Key Features

<CardGroup cols={2}>
  <Card title="Open Code" icon="code">
    Full access to component code for complete customization
  </Card>

  <Card title="Accessible" icon="universal-access">
    Built with Bits UI for WAI-ARIA compliant components
  </Card>

  <Card title="Customizable" icon="palette">
    Styled with Tailwind CSS and CSS variables
  </Card>

  <Card title="TypeScript" icon="t">
    Full TypeScript support with Svelte 5
  </Card>

  <Card title="Dark Mode" icon="moon">
    Built-in dark mode support
  </Card>

  <Card title="CLI Tool" icon="terminal">
    Easy component installation with the CLI
  </Card>
</CardGroup>

## Quick Start

Get up and running in minutes:

<Steps>
  <Step title="Install the CLI">
    ```bash theme={null}
    npx shadcn-svelte@latest init
    ```
  </Step>

  <Step title="Add a component">
    ```bash theme={null}
    npx shadcn-svelte@latest add button
    ```
  </Step>

  <Step title="Use in your app">
    ```svelte theme={null}
    <script>
      import { Button } from "$lib/components/ui/button";
    </script>

    <Button>Click me</Button>
    ```
  </Step>
</Steps>