Vite - shadcn-svelte

Docs

Vite

How to setup shadcn-svelte in a Vite project.

Setup your project

Add TailwindCSS

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

	npx  sv add tailwindcss

Install dependencies

	npm install

Setup path aliases

Update your path aliases in your tsconfig.json and vite.config.ts.

tsconfig.json

	{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "$lib": ["./src/lib"],
      "$lib/*": ["./src/lib/*"]
    }
  }
}

vite.config.ts

	import path from "path";
 
export default defineConfig({
  // ... other options
  resolve: {
    alias: {
      $lib: path.resolve("./src/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