● Note
SvelteKit + Storybook + shadcn-svelte starter.
Every SvelteKit project I start uses the same stack. This is that stack, pre-configured — Tailwind v4, shadcn-svelte, and Storybook wired up.
Type
Template repository
Stack
SvelteKit, Tailwind v4, shadcn-svelte, Storybook
Role
Design and engineering
Outcome
Zero-config starting point for new projects
What's included
The template is intentionally minimal — configured for the starting point. Add components and patterns as the work requires.
SvelteKit + TypeScript
Minimal SvelteKit setup with TypeScript, ESLint, and Prettier configured.
Tailwind v4
Tailwind CSS v4 via the Vite plugin, with a semantic CSS variable layer for theming.
shadcn-svelte
shadcn-svelte initialized with nothing pre-installed. Add components individually as the project needs them.
Storybook
Storybook configured for SvelteKit with addon-docs, addon-themes, addon-a11y, addon-svelte-csf, and dark mode support.
Dark mode
mode-watcher integrated for system-aware dark mode, wired into Storybook via withThemeByClassName.
Fonts
Inter (variable) installed via @fontsource-variable as the default sans-serif.
Setup guide
How to rebuild the stack from scratch — useful for understanding what each piece does or adapting the setup to a different starting point.
Create a new SvelteKit project
npx sv create my-app
cd my-app
Choose: SvelteKit minimal, TypeScript, ESLint, Prettier, Vitest.
Install Tailwind CSS v4
pnpm add -D tailwindcss @tailwindcss/vite
Add the Vite plugin to vite.config.ts and create src/app.css with @import "tailwindcss".
Initialize shadcn-svelte
pnpm dlx shadcn-svelte@latest init
Follow the prompts. This sets up the component library config and extends your Tailwind setup.
Install mode-watcher
pnpm add mode-watcher
Add ModeWatcher to your root layout and configure the dark class strategy.
Install Storybook
pnpm dlx storybook@latest init
Storybook detects SvelteKit automatically. Import src/app.css in .storybook/preview.ts.
Install additional Storybook addons
pnpm add -D @storybook/addon-svelte-csf @storybook/addon-themes @storybook/addon-a11y @storybook/addon-docs @storybook/addon-vitest
Register each addon in .storybook/main.ts.
Configure dark mode in Storybook
Use withThemeByClassName from @storybook/addon-themes in .storybook/preview.ts, mapping light to "" and dark to "dark".
Add a custom Storybook theme
Create .storybook/theme.ts using storybook/theming and reference it in .storybook/manager.ts.
Repository
The repository is not yet public. It will be available on GitHub as a template once the project is ready to share.
Why this exists
Getting Tailwind v4, shadcn-svelte, and Storybook working together has enough rough edges that it's worth documenting once and reusing. This template is what I reach for when starting a new SvelteKit project.