# SvelteKit

How to setup shadcn-svelte in a SvelteKit project.

### [Epicenter](https://github.com/EpicenterHQ/epicenter)

[Local-first, open source apps](https://github.com/EpicenterHQ/epicenter)

[Special Sponsor](https://github.com/EpicenterHQ/epicenter)

### [Create project](#create-project)

Use the SvelteKit CLI to create a new project with TailwindCSS

```bash
pnpm dlx sv create my-app --add tailwindcss
```

```bash
npx sv create my-app --add tailwindcss
```

```bash
bun x sv create my-app --add tailwindcss
```

### [Setup path aliases](#setup-path-aliases)

If you are not using the default alias `$lib`, you'll need to update your `svelte.config.js` file to include those aliases.

svelte.config.js

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

### [Run the CLI](#run-the-cli)

```bash
pnpm dlx shadcn-svelte@latest init
```

```bash
npx shadcn-svelte@latest init
```

```bash
bun x shadcn-svelte@latest init
```

### [Configure components.json](#configure-componentsjson)

You will be asked a few questions to configure `components.json`:

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

### [That's it](#thats-it)

You can now start adding components to your project.

```bash
pnpm dlx shadcn-svelte@latest add button
```

```bash
npx shadcn-svelte@latest add button
```

```bash
bun x shadcn-svelte@latest add button
```

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

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