Docs
SvelteKit
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-add
CLI to add Tailwind CSS to your project.
npx svelte-add@latest 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.
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>