how to install shadcn ui in sveltekit

How to Install Shadcn UI in SvelteKit

SvelteKit
September 27, 2023

In this tutorial, I will show you how to use shadcn ui in SvelteKit. We will install SvelteKit with with Typescript shadcn/ui. Note This is an unofficial port of shadcn/ui to Svelte, and is not affiliated with @shadcn, just inspired by him.


Create SvelteKit 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


Run the CLI

npx shadcn-svelte@latest init


Configure components.json

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

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.postcss
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


Setup path aliases

If you changed the path aliases from the default, you'll also need to update your svelte.config.js file to include those aliases.

svelte.config.js

const config = {
 // ... other config
 kit: {
  // ... other config
  alias: {
   $lib: "./src/lib"
  }
 }
};


Test shadcn-svelte components.

Run below command to use shadcn-svelte button component.

npx shadcn-svelte@latest add button

+page.svelte

<script lang="ts">
  import { Button } from "$lib/components/ui/button";
</script>

<div class="flex flex-col items-center">
  <h1 class="text-4xl text-orange-600">
    How to Install Shadcn UI in SvelteKit
  </h1>
  <Button>Button</Button>
</div>
shadcn ui in sveltekit

shadcn ui in sveltekit