whichdevtool?
Menu
StacksDirectory Pricing changes Glossary
VPS and cloud servers App hosting and PaaS Managed databases Transactional email APIs Email marketing and newsletters Domain registrars CDN, DNS and edge security Monitoring, uptime and error tracking Auth and identity Frontend and full-stack frameworks Backend frameworks UI component libraries AI model APIs File and object storage Payments and billing Background jobs, queues and workflows ORMs and database toolkits

Copy-in Svelte component collection and CLI · by Hunter Johnston (huntabyte) and contributors

shadcn-svelte

An unofficial, community-led Svelte port of shadcn/ui: copy-in components built with Bits UI and Tailwind CSS, targeting Svelte 5 and Tailwind v4.

Visit shadcn-svelte.com ↗ Alternatives Open source Open source
shadcn-svelte homepage
§1

Overview

shadcn-svelte is the Svelte counterpart to shadcn/ui, started because the Svelte ecosystem lacked an equivalent. It follows the same open-code principles: the CLI copies each component into your project, components share a composable interface, and a registry schema lets you distribute your own components.

Behaviour and accessibility come from Bits UI, and some components use related libraries such as Paneforge. The docs explain the upside of this split: the headless core receives fixes when you update Bits UI, while the topmost styled layer stays yours to modify.

The current version expects Svelte 5 and Tailwind CSS v4; Tailwind v4 support landed in May 2025 and the old Tailwind v3 docs moved to a separate archive site. Following upstream, the default style is deprecated in favour of new-york and colors moved to OKLCH. The project is led by Hunter Johnston, who also maintains Bits UI. Projects still on Svelte 4 or Tailwind v3 should follow the migration guides before adding new components with the latest CLI.

§2

Pricing and plans

Plan Price What you get
Open source Free MIT licence

No paid tier.

Source: www.shadcn-svelte.com/docs · prices as published, excluding tax.

§3

What it does

Copy-in components
The CLI adds editable Svelte component files to your project.
Bits UI core
Accessible headless behaviour updated through the Bits UI dependency.
Tailwind v4 theming
CSS variables in OKLCH with @theme inline.
Registry
Build and share your own component registries.
data-slot styling
Every primitive that renders an element carries a data-slot attribute.
§4

Strengths and limitations

Strengths

  • The main shadcn-style option for Svelte
  • Headless fixes arrive through package updates
  • Built for Svelte 5 runes
  • Free under MIT

Limitations

  • Unofficial port that follows upstream shadcn/ui with a delay
  • Requires Svelte 5 and Tailwind v4 for current versions
  • Styled components you copied need manual updates
  • Small maintainer team
§5

Who it suits

Good for

  • SvelteKit apps building a custom design system
  • Svelte developers familiar with shadcn/ui

Look elsewhere if

  • Svelte 4 projects (use the older docs or upgrade first)
  • Teams wanting a fully packaged styled library (see Skeleton)
§6

Alternatives to shadcn-svelte

Tool From Free option Stages
Ant Design Enterprise React component library
— Open source
Angular Material Official Material Design components for Angular
— Open source
HeroUI Styled React component library (formerly NextUI)
— Free tier
shadcn/ui Copy-in React component collection and registry CLI
— Open source
Base UI Unstyled accessible React components
— Open source
Material UI (MUI) Styled React component library with paid advanced components
$299/yr Free tier

All UI component libraries →

§7

Questions

Is shadcn-svelte made by shadcn?

No. It is an unofficial community port, created with his blessing.

Does shadcn-svelte support Svelte 5?

Yes. Current versions expect Svelte 5 and Tailwind v4.

What is shadcn-svelte built on?

Bits UI for headless behaviour and Tailwind CSS for styling.

Sources read for this page