how to install shadcn ui in sveltekit

How to Install Shadcn UI in 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.


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


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

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

shadcn ui in sveltekit