Skip to main content
shadcn-svelte Hero

​
Build Your Component Library

An unofficial, community-led Svelte port of shadcn/ui. This is not a component library. It is how you build your component library. Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. Use this to build your own component library.

Get Started

Learn about shadcn-svelte and its core principles

Installation

Install shadcn-svelte in your project

Components

Browse 50+ accessible UI components

CLI

Use the CLI to add components to your project

​
Key Features

Open Code

Full access to component code for complete customization

Accessible

Built with Bits UI for WAI-ARIA compliant components

Customizable

Styled with Tailwind CSS and CSS variables

TypeScript

Full TypeScript support with Svelte 5

Dark Mode

Built-in dark mode support

CLI Tool

Easy component installation with the CLI

​
Quick Start

Get up and running in minutes:
1

Install the CLI

npx shadcn-svelte@latest init
2

Add a component

npx shadcn-svelte@latest add button
3

Use in your app

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

<Button>Click me</Button>

Build docs developers (and LLMs) love

Get started for freeTalk to us