> ## 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.

# Manual Installation

> How to setup shadcn-svelte manually.

<Steps>
  <Step title="Add Tailwind">
    Use the `sv` CLI to add Tailwind CSS to your project.

    ```bash theme={null}
    npx sv add tailwindcss
    ```
  </Step>

  <Step title="Add dependencies">
    Add the following dependencies to your project:

    ```bash theme={null}
    npm install tailwind-variants clsx tailwind-merge tw-animate-css
    ```
  </Step>

  <Step title="Add icon library">
    Install `@lucide/svelte`:

    ```bash theme={null}
    npm install @lucide/svelte
    ```
  </Step>

  <Step title="Configure path aliases">
    If you are using SvelteKit and are not using the default alias `$lib`, you'll need to update your `svelte.config.js` file to include those aliases.

    ```ts title="svelte.config.js" theme={null}
    const config = {
      // ... other config
      kit: {
        // ... other config
        alias: {
          "@/*": "./path/to/lib/*",
        },
      },
    };
    ```

    If you are *not* using SvelteKit, then you'll need to update your path aliases in your `tsconfig.json` and `vite.config.ts`.

    ```json title="tsconfig.json" theme={null}
    {
      "compilerOptions": {
        // ... other options
        "paths": {
          "$lib": ["./src/lib"],
          "$lib/*": ["./src/lib/*"]
        }
      }
    }
    ```

    ```ts title="vite.config.ts" theme={null}
    import path from "path";

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

  <Step title="Configure styles">
    Add the following to your global CSS file. You can learn more about using CSS variables for theming in the [theming section](/theming).

    ```css title="src/routes/layout.css" theme={null}
    @import "tailwindcss";
    @import "tw-animate-css";
    @custom-variant dark (&:is(.dark *));

    :root {
      --radius: 0.625rem;
      --background: oklch(1 0 0);
      --foreground: oklch(0.145 0 0);
      --card: oklch(1 0 0);
      --card-foreground: oklch(0.145 0 0);
      --popover: oklch(1 0 0);
      --popover-foreground: oklch(0.145 0 0);
      --primary: oklch(0.205 0 0);
      --primary-foreground: oklch(0.985 0 0);
      --secondary: oklch(0.97 0 0);
      --secondary-foreground: oklch(0.205 0 0);
      --muted: oklch(0.97 0 0);
      --muted-foreground: oklch(0.556 0 0);
      --accent: oklch(0.97 0 0);
      --accent-foreground: oklch(0.205 0 0);
      --destructive: oklch(0.577 0.245 27.325);
      --border: oklch(0.922 0 0);
      --input: oklch(0.922 0 0);
      --ring: oklch(0.708 0 0);
      --chart-1: oklch(0.646 0.222 41.116);
      --chart-2: oklch(0.6 0.118 184.704);
      --chart-3: oklch(0.398 0.07 227.392);
      --chart-4: oklch(0.828 0.189 84.429);
      --chart-5: oklch(0.769 0.188 70.08);
      --sidebar: oklch(0.985 0 0);
      --sidebar-foreground: oklch(0.145 0 0);
      --sidebar-primary: oklch(0.205 0 0);
      --sidebar-primary-foreground: oklch(0.985 0 0);
      --sidebar-accent: oklch(0.97 0 0);
      --sidebar-accent-foreground: oklch(0.205 0 0);
      --sidebar-border: oklch(0.922 0 0);
      --sidebar-ring: oklch(0.708 0 0);
    }

    .dark {
      --background: oklch(0.145 0 0);
      --foreground: oklch(0.985 0 0);
      --card: oklch(0.205 0 0);
      --card-foreground: oklch(0.985 0 0);
      --popover: oklch(0.269 0 0);
      --popover-foreground: oklch(0.985 0 0);
      --primary: oklch(0.922 0 0);
      --primary-foreground: oklch(0.205 0 0);
      --secondary: oklch(0.269 0 0);
      --secondary-foreground: oklch(0.985 0 0);
      --muted: oklch(0.269 0 0);
      --muted-foreground: oklch(0.708 0 0);
      --accent: oklch(0.371 0 0);
      --accent-foreground: oklch(0.985 0 0);
      --destructive: oklch(0.704 0.191 22.216);
      --border: oklch(1 0 0 / 10%);
      --input: oklch(1 0 0 / 15%);
      --ring: oklch(0.556 0 0);
      --chart-1: oklch(0.488 0.243 264.376);
      --chart-2: oklch(0.696 0.17 162.48);
      --chart-3: oklch(0.769 0.188 70.08);
      --chart-4: oklch(0.627 0.265 303.9);
      --chart-5: oklch(0.645 0.246 16.439);
      --sidebar: oklch(0.205 0 0);
      --sidebar-foreground: oklch(0.985 0 0);
      --sidebar-primary: oklch(0.488 0.243 264.376);
      --sidebar-primary-foreground: oklch(0.985 0 0);
      --sidebar-accent: oklch(0.269 0 0);
      --sidebar-accent-foreground: oklch(0.985 0 0);
      --sidebar-border: oklch(1 0 0 / 10%);
      --sidebar-ring: oklch(0.439 0 0);
    }

    @theme inline {
      --radius-sm: calc(var(--radius) - 4px);
      --radius-md: calc(var(--radius) - 2px);
      --radius-lg: var(--radius);
      --radius-xl: calc(var(--radius) + 4px);
      --color-background: var(--background);
      --color-foreground: var(--foreground);
      --color-card: var(--card);
      --color-card-foreground: var(--card-foreground);
      --color-popover: var(--popover);
      --color-popover-foreground: var(--popover-foreground);
      --color-primary: var(--primary);
      --color-primary-foreground: var(--primary-foreground);
      --color-secondary: var(--secondary);
      --color-secondary-foreground: var(--secondary-foreground);
      --color-muted: var(--muted);
      --color-muted-foreground: var(--muted-foreground);
      --color-accent: var(--accent);
      --color-accent-foreground: var(--accent-foreground);
      --color-destructive: var(--destructive);
      --color-border: var(--border);
      --color-input: var(--input);
      --color-ring: var(--ring);
      --color-chart-1: var(--chart-1);
      --color-chart-2: var(--chart-2);
      --color-chart-3: var(--chart-3);
      --color-chart-4: var(--chart-4);
      --color-chart-5: var(--chart-5);
      --color-sidebar: var(--sidebar);
      --color-sidebar-foreground: var(--sidebar-foreground);
      --color-sidebar-primary: var(--sidebar-primary);
      --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
      --color-sidebar-accent: var(--sidebar-accent);
      --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
      --color-sidebar-border: var(--sidebar-border);
      --color-sidebar-ring: var(--sidebar-ring);
    }

    @layer base {
      * {
        @apply border-border outline-ring/50;
      }

      body {
        @apply bg-background text-foreground;
      }
    }
    ```

    Feel free to add or modify as needed to suit your project.
  </Step>

  <Step title="Configure utils">
    You'll want to create a `cn` helper to make it easier to conditionally add and merge Tailwind CSS classes.

    ```ts title="src/lib/utils.ts" theme={null}
    import { type ClassValue, clsx } from "clsx";
    import { twMerge } from "tailwind-merge";

    export function cn(...inputs: ClassValue[]) {
      return twMerge(clsx(inputs));
    }
    ```
  </Step>

  <Step title="Import styles to your app">
    Create `src/routes/+layout.svelte` and import the styles:

    ```svelte title="src/routes/+layout.svelte" theme={null}
    <script lang="ts">
      import "../app.css";
      let { children } = $props();
    </script>

    {@render children?.()}
    ```
  </Step>

  <Step title="That's it">
    You can now start adding components to your project.

    ```bash theme={null}
    npx shadcn-svelte@latest add button
    ```
  </Step>
</Steps>