SvelteKit Dashboard Starter

A production-ready admin dashboard template built with SvelteKit, Chart.js, and vanilla CSS. Features dark mode, responsive layout, interactive charts, and data tables.

Features

• ⚡ SvelteKit 2 — Fast, modern framework with SSR/SSG
• 📊 Chart.js Charts — Line, bar, and doughnut charts with theme support
• 🌙 Dark Mode — Toggle with localStorage persistence
• 📱 Responsive — Mobile-friendly sidebar layout
• 📋 Data Tables — Sortable tables with badge support
• 🎨 CSS Variables — Easy theming, no CSS framework needed
• 🔒 TypeScript — Full type safety throughout

Pages

Quick Start

# Clone
git clone https://github.com/kszongic/sveltekit-dashboard-starter.git
cd sveltekit-dashboard-starter

# Install
npm install

# Dev
npm run dev

# Build
npm run build

Project Structure

src/
├── app.css                      # Global styles & CSS variables
├── app.html                     # HTML template
├── lib/
│   ├── components/
│   │   ├── Sidebar.svelte       # Navigation sidebar
│   │   ├── StatCard.svelte      # KPI stat cards
│   │   ├── ChartCard.svelte     # Chart.js wrapper
│   │   └── DataTable.svelte     # Data table with badges
│   └── stores/
│       └── theme.ts             # Dark mode store
└── routes/
    ├── +layout.svelte           # Root layout with sidebar
    ├── dashboard/
    │   ├── +page.svelte         # Main dashboard
    │   ├── analytics/           # Analytics page
    │   ├── customers/           # Customers page
    │   ├── orders/              # Orders page
    │   └── products/            # Products page
    └── settings/
        └── +page.svelte         # Settings page

Customization

Theming

Edit CSS variables in src/app.css:

:root {
  --primary: #6366f1;      /* Change brand color */
  --sidebar-bg: #1e293b;   /* Sidebar background */
  --radius: 0.5rem;        /* Border radius */
}

Adding Pages

1. Create src/routes/dashboard/your-page/+page.svelte
2. Add nav item in src/lib/components/Sidebar.svelte

Adding Charts

<ChartCard
  type="line"
  labels={['Jan', 'Feb', 'Mar']}
  datasets={[{ label: 'Data', data: [10, 20, 30], borderColor: '#6366f1' }]}
  title="My Chart"
/>

Tech Stack

• SvelteKit — Full-stack framework
• Chart.js — Charts
• TypeScript — Type safety
• Vanilla CSS with custom properties

License

MIT — use it for anything.