SvelteKit - shadcn-svelte

Docs

SvelteKit

How to setup shadcn-svelte in a SvelteKit project.

Setup your project

Create project

Use the SvelteKit CLI to create a new project.

	npm create  svelte@latest my-app

Add TailwindCSS

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

	npx  sv add tailwindcss

Install dependencies

	npm install

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

	npx  shadcn-svelte@latest init

Configure components.json

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

	Would you like to use TypeScript (recommended)? › Yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › src/app.css
Where is your tailwind.config.[cjs|js|ts] located? › tailwind.config.js
Configure the import alias for components: › $lib/components
Configure the import alias for utils: › $lib/utils

That's it

You can now start adding components to your project.

	npx  shadcn-svelte@latest 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";
</script>
 
<Button>Click me</Button>

On This Page