Shadcn Svelte as Package

You're reading this correctly: this package does exactly what the original Shadcn authors advise against.

Sometimes you just want a UI library you can drop into your app and start using—no custom CLI, no syncing with a company design system, and no maintaining hundreds of copied component files. In those cases, the "recommended" approach quickly stops being fun or practical.

This package is for that scenario: install it, use it, and forget about the messy implementation details.

If you do want deep customization or design-system alignment, you should use the original Shadcn library and follow its official guidelines.

Installation

Install the package along with its peer dependencies:

# npm
npm i @puredev/shadcn-svelte-tw tailwindcss tw-animate-css

# bun
bun i @puredev/shadcn-svelte-tw tailwindcss tw-animate-css

Tailwind CSS v4 Setup

This library requires Tailwind CSS v4 to be configured in your project. If you already have Tailwind working, skip this section.

Tailwind v4 needs a build tool integration to process its CSS directives. Pick the one that matches your setup:

| Build tool | Package | Docs | | ------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------- | | Vite (SvelteKit default) | @tailwindcss/vite | tailwindcss.com/docs/installation/vite | | PostCSS | @tailwindcss/postcss | tailwindcss.com/docs/installation/postcss | | CLI | @tailwindcss/cli | tailwindcss.com/docs/installation/tailwind-cli |

Most SvelteKit projects use Vite, so the typical setup is:

npm i -D @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });

CSS Setup

Add the following three imports to your global CSS file (e.g. src/app.css):

@import 'tailwindcss';
@import 'tw-animate-css';
@import '@puredev/shadcn-svelte-tw/theme.css';

The order matters — tailwindcss must come first, then tw-animate-css (provides accordion/collapsible animations), then the theme which defines color tokens, radius values, and base styles.

Then import that CSS file in your root layout:

<!-- src/routes/+layout.svelte -->
<script>
  import '../app.css';

  const { children } = $props();
</script>

{@render children()}

Usage

Components are exported as namespaces to avoid naming collisions:

<script>
  import { Button, Card, Accordion } from '@puredev/shadcn-svelte-tw';
</script>

<Button variant="outline">Click me</Button>

<Card>
  <Card.Header>
    <Card.Title>Hello</Card.Title>
  </Card.Header>
  <Card.Content>World</Card.Content>
</Card>

<Accordion type="single">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Open</Accordion.Trigger>
    <Accordion.Content>Content here</Accordion.Content>
  </Accordion.Item>
</Accordion>

Customizing the theme

The theme uses CSS custom properties, so you can override any token after the import:

@import 'tailwindcss';
@import 'tw-animate-css';
@import '@puredev/shadcn-svelte-tw/theme.css';

:root {
  --radius: 0.5rem;
  --primary: oklch(0.6 0.25 260);
  --primary-foreground: oklch(1 0 0);
}