shadcn-svelte — shadcn/ui for the Svelte Ecosystem

Introduction

shadcn-svelte adapts the shadcn/ui model for Svelte and SvelteKit. Components are copied into your project as source files rather than installed as a package, giving you complete control over markup, styling, and behavior.

What shadcn-svelte Does

• Ports the shadcn/ui component catalog to Svelte 5 and SvelteKit
• Uses Bits UI primitives for accessible, headless component logic
• Styles components with Tailwind CSS and configurable CSS variables
• Provides a CLI for scaffolding, adding components, and managing dependencies
• Ships TypeScript definitions for every component and utility

Architecture Overview

Each component wraps a Bits UI primitive (which handles keyboard navigation, ARIA attributes, and focus management) with Tailwind CSS classes. The CLI reads a components.json configuration that specifies paths, style options, and alias settings. Components land in your src/lib/components/ui directory as plain .svelte files you can freely edit.

Self-Hosting & Configuration

• Run npx shadcn-svelte@latest init in a SvelteKit project to set up configuration
• The CLI configures Tailwind, path aliases, and component output directories
• Add components individually or in bulk with the add command
• Customize themes by overriding CSS variables in your global CSS file
• Compatible with SvelteKit, Vite, and standard Svelte setups

Key Features

• Svelte 5 support with runes-based reactivity
• Full WAI-ARIA compliance through Bits UI primitives
• Light and dark mode via CSS custom properties
• No runtime dependency on the library after components are copied
• Active development tracking the React shadcn/ui component catalog

Comparison with Similar Tools

• shadcn/ui (React) — the original project; shadcn-svelte mirrors its component set for Svelte
• shadcn-vue — the Vue port; shadcn-svelte targets Svelte specifically
• Skeleton UI — Svelte component library installed as a package; shadcn-svelte copies source code
• Flowbite Svelte — Tailwind component library with Svelte bindings; shadcn-svelte offers code ownership
• Melt UI — headless Svelte primitives; shadcn-svelte builds styled components on top of Bits UI

FAQ

Q: Does shadcn-svelte require SvelteKit? A: SvelteKit is recommended for the best experience, but components work in any Svelte project with the right build configuration.

Q: How do I update components after copying them? A: Re-run the CLI add command. It will prompt before overwriting existing files.

Q: Can I use shadcn-svelte with Svelte 4? A: The latest version targets Svelte 5. Earlier releases supported Svelte 4, but active development has moved forward.

Q: Is there a Figma design kit? A: The project does not maintain an official Figma kit, but community-contributed design files exist.

Sources

• https://github.com/huntabyte/shadcn-svelte
• https://shadcn-svelte.com