sveltekit-starter

A minimal, opinionated SvelteKit starter template — batteries included, ready to delete and replace with your own app.

Tech Stack

Prerequisites

• Node.js (see .nvmrc for the required version)
• pnpm

Setup

1. Install dependencies

   pnpm install
   

2. Start the development server

   pnpm dev
   

   Open http://localhost:5173 in your browser.

3. Replace the demo page

   Edit src/routes/+page.svelte — the demo content is just a placeholder to verify the stack works.

Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── ui/         # shadcn-svelte auto-generated components (do not edit manually)
│   │   └── demo/       # starter demo components (safe to delete)
│   ├── hooks/          # custom Svelte hooks
│   └── utils.ts        # cn() and shared utility types
└── routes/
    ├── +layout.svelte  # app shell (Toaster, ModeWatcher, favicon)
    ├── +page.svelte    # demo home page — replace with your own
    └── layout.css      # Tailwind + shadcn CSS variables

Adding shadcn-svelte Components

Components are installed directly into the project via CLI — never written by hand:

pnpm dlx shadcn-svelte@latest add <component>

After adding, format the generated files:

pnpm biome format --write src/lib/components/ui/

Full component reference: shadcn-svelte.com

Available Scripts

Coding Conventions

• Svelte 5 runes only ($state, $derived, $props) — no legacy Svelte 4 syntax
• Single quotes, no semicolons, 2-space indent, 100-char line width (Biome)
• Use cn() from $lib/utils for conditional classes — never the class: directive
• Import directly from source files — no barrel index.ts re-exports (except $lib/components/ui/, which is auto-generated)
• App-specific components go in $lib/components/<feature>/, not in $lib/components/ui/