shadcn-svelte

shadcn-svelte is the Svelte port of shadcn/ui, built on Bits UI primitives instead of Radix. Same bargain: the CLI copies source into your project and you own it from that moment.

At a glance

Install	npx shadcn-svelte@latest init
Package	none, source is copied in
Primitives	Bits UI
Styling	Tailwind CSS
Frameworks	SvelteKit, Vite, Astro
MCP server	not published
License	MIT

Install

npx shadcn-svelte@latest init
npx shadcn-svelte@latest add button dialog

What the code looks like

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

<Dialog.Root>
  <Dialog.Trigger>
    <Button variant="outline" size="sm">Edit profile</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Edit profile</Dialog.Title>
    </Dialog.Header>
  </Dialog.Content>
</Dialog.Root>

Maintained by the Bits UI author

The same person maintains both projects, so the primitive layer and the styled layer move together rather than drifting. That is not the case for every shadcn port, and it is the main reason this one stays current.

Choose it if

• You want the shadcn workflow in Svelte with a maintainer who owns the whole stack.
• Your organisation already runs shadcn/ui in React and wants a shared design language.

Look elsewhere if

• You want automatic upgrades. There is no package to bump, by design.
• You want a full theming system rather than components. Skeleton covers that ground.