# shadcn-svelte — shadcn/ui for the Svelte Ecosystem

> A Svelte port of shadcn/ui that lets you copy accessible, Tailwind-styled components directly into your SvelteKit project.

## Install

Save as a script file and run:

# shadcn-svelte — shadcn/ui for the Svelte Ecosystem

## Quick Use
```bash
npx shadcn-svelte@latest init
npx shadcn-svelte@latest add button card dialog
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-c4c53fe4
Author: Script Depot