shadcn-svelte with Tailwind v4.1 + Vite

A comprehensive guide for working with shadcn-svelte, the Svelte port of shadcn/ui. This skill covers component installation, customization, and integration patterns for Svelte and SvelteKit projects using Tailwind CSS v4.1 with the @tailwindcss/vite plugin.

When to Use

Use shadcn-svelte when:

• Building component-based Svelte/SvelteKit applications
• You need accessible, styled UI elements (buttons, forms, modals, dialogs, etc.)
• You want customizable components that don't lock you into a UI library
• You're using Tailwind CSS v4.1 with Vite for zero-runtime CSS
• You need complex components like data tables, drawers, or navigation menus
• You want TypeScript support with full type safety

Do NOT use for lightweight static sites or when you prefer minimal dependencies.

Svelte Component Library Ecosystem

While this skill focuses on shadcn-svelte, here's the broader Svelte UI landscape to help you choose: