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  [email protected] add tailwindcss

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  [email protected] 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  [email protected] 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