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>

Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,