SvelteKit

How to setup shadcn-svelte in a SvelteKit project.

Create project

Use the SvelteKit CLI to create a new project.

pnpm dlx sv create my-app

npx sv create my-app

bun x sv create my-app

npx sv create my-app

Add TailwindCSS

Use the Svelte CLI to add Tailwind CSS to your project.

pnpm dlx sv add tailwindcss

npx sv add tailwindcss

bun x sv add tailwindcss

npx sv add tailwindcss

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

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

Run the CLI

pnpm dlx shadcn-svelte@next init

npx shadcn-svelte@next init

bun x shadcn-svelte@next init

npx shadcn-svelte@next init

Configure components.json

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

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

That's it

You can now start adding components to your project.

pnpm dlx shadcn-svelte@next add button

npx shadcn-svelte@next add button

bun x shadcn-svelte@next add button

npx shadcn-svelte@next add button

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

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

Typography Vite