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.
Create project
Use the SvelteKit CLI to create a new project with TailwindCSSnpx sv create my-app --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.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: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
You can now start adding components to your project.npx shadcn-svelte@latest add button
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>