How to Install Shadcn UI in SvelteKit

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>

See Also

How to Use Accordion in SvelteKit with Shadcn UI
How to Use Alerts in SvelteKit with Shadcn UI
Create Alert Dialog in SvelteKit with Shadcn UI
How to Use Avatar in SvelteKit with Shadcn UI