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

# Vite

> How to setup shadcn-svelte in a Vite project.

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

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

  <Step title="Edit tsconfig.json file">
    The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
    Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and
    `tsconfig.app.json` files:

    ```json title="tsconfig.json" theme={null}
    {
      "files": [],
      "references": [
        { "path": "./tsconfig.app.json" },
        { "path": "./tsconfig.node.json" }
      ],
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "$lib": ["./src/lib"],
          "$lib/*": ["./src/lib/*"]
        }
      }
    }
    ```
  </Step>

  <Step title="Edit tsconfig.app.json file">
    Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:

    ```json title="tsconfig.app.json" theme={null}
    {
      "compilerOptions": {
        // ...
        "baseUrl": ".",
        "paths": {
          "$lib": ["./src/lib"],
          "$lib/*": ["./src/lib/*"]
        }
      }
    }
    ```
  </Step>

  <Step title="Update vite.config.ts">
    Add the following code to the vite.config.ts so your app can resolve paths without error:

    ```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="Run the CLI">
    ```bash theme={null}
    npx shadcn-svelte@latest init
    ```
  </Step>

  <Step title="Configure components.json">
    You will be asked a few questions to configure `components.json`:

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

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

    ```bash theme={null}
    npx shadcn-svelte@latest add button
    ```

    The command above will add the `Button` component to your project. You can then import it like this:

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

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