SvelteForge - SvelteKit Admin Dashboard Template

A production-ready admin dashboard template built with SvelteKit 3, Svelte 5, Tailwind CSS 4, and Drizzle ORM. Features self-hosted Better Auth authentication, optional OAuth (Google & GitHub), role-based access control, and a full suite of admin tools -- no hosted auth service required.

⚡ Need workspaces, billing, AI chat, kanban, helpdesk, CRM, invoicing, MFA + passkeys?

SvelteForge Premium → — same stack, plus 30+ wired-up modules, multi-tenant from row zero. Live demo → · See feature comparison ↓

Screenshots

Dashboard (Light)	Dashboard (Dark)

User Management	Analytics

Command Palette (Cmd+K)	Login

Free vs Premium

SvelteForge (this repo) is the open-source core — pure SvelteKit + Drizzle + Better Auth, MIT-licensed, free forever. SvelteForge Premium clones this codebase and adds a multi-tenant SaaS layer on top: workspaces, billing, MFA + passkeys, AI chat, CRM, helpdesk, invoicing, and 30+ other production-ready modules.

Capability	Free (this repo)	Premium →
Auth — username/email + password, Google + GitHub OAuth, sessions, Argon2id	✅	✅
Magic-link sign-in	—	✅
TOTP 2FA + recovery codes	—	✅
WebAuthn passkeys	—	✅
User impersonation ("sign in as")	—	✅
Multi-tenant workspaces + org switcher + member roster + invitations	—	✅
Custom roles + permission catalogue	—	✅
Billing — Stripe + Polar (env-switched), webhooks, customer portal	—	✅
Per-org usage metering + quota dashboards	—	✅
Inbox — multi-folder mail client with threads, snooze, scheduled send	—	✅
Team Chat — real-time SSE, presence, typing, mentions, reactions	—	✅
Calendar — month + week views, color tagging	—	✅
Kanban — drag-drop boards, columns, due dates	—	✅
Notes / Wiki — workspace markdown with folder tree	—	✅
Projects + tasks — Gantt timeline, status, priority	—	✅
Files — S3-compatible storage (AWS S3, R2, MinIO, B2)	—	✅
AI Chat — Anthropic Claude with prompt caching + tool use	—	✅
CRM — contacts directory, drag-to-stage deals, CSV import	—	✅
Helpdesk — ticket queue with SLA stamps, threaded replies	—	✅
Store — products + orders with line-item snapshots	—	✅
Invoicing — line-item editor, PDF, recurring schedules, customer portal	—	✅
Forms builder — drag-drop with conditional logic + rate-limited submit	—	✅
Status page — public services + incidents + email subscribers	—	✅
Audit log — saved-filter chips + CSV export	—	✅
API keys — prefix + hash storage, scopes, IP allowlist, per-key rate limit	—	✅
Outgoing webhooks — HMAC-signed, retries, delivery history	—	✅
REST API at `/api/v1` — OpenAPI 3.1 spec + Postman collection	—	✅
Cron suite — 6 recurring endpoints (bearer-token auth)	—	✅
Slack/Discord notification channels — fan-out keyed by audit events	—	✅
Scheduled CSV reports — emailed daily/weekly/monthly	—	✅
Referrals — codes, attribution, commission accrual	—	✅
Customisable My Dashboard — drag-reorder widget grid	—	✅
Onboarding wizard + product tour primitive	—	✅
Theme customizer — brand color + typography picker	—	✅
Form wizard + Data table + CSV importer components	—	✅
Email — Resend + Cloudflare Email Sending adapters (free has console only)	console (dev)	+ Resend + Cloudflare
Documentation — `/docs` developer reference	17 pages	17 pages
User guide at `/guide` — workspaces, billing, AI, every premium app	—	30+ chapters
Database tables	7	7 + 49 premium
Demo seeder — Acme workspace + 30 tenant orgs for SaaS analytics	—	✅
License	MIT	Commercial
Pricing	Free forever	$69 / $149 / $349

▶ Try the live Premium demo → (sign in with admin / password123 · seeded with realistic data across every module)

More Svelte dashboards from DashboardPack

Building on Svelte? Apex Dashboard — Svelte Edition is our flagship premium SvelteKit template — the same Svelte 5 + Tailwind CSS v4 stack as this repo, with a completely different design system and 39 demo pages. If SvelteForge got you shipping, Apex takes the polish further.

Apex Dashboard — Svelte Edition
_{SvelteKit 3 + Svelte 5 (runes) + Tailwind CSS v4 · 39 pages · 6 dashboards · ⌘K command palette · LayerChart data viz · live theme customizer · runtime i18n (en/de/fr) · drag-and-drop Kanban · Storybook component library.}

View Apex Svelte → · ▶ Live demo · Browse all Svelte templates →

More Svelte & SvelteKit templates land on the DashboardPack Svelte category as we build them — bookmark it to catch new releases.

Prefer another stack?

Loved SvelteForge but need it in another framework? Check out our premium templates on DashboardPack -- built for production, backed by dedicated support.

Zenith _{Next.js 16 + React 19 + Tailwind CSS v4. Achromatic design, drag-and-drop, i18n, RTL support.}	Signal _{Next.js 16 + React 19 + Tailwind CSS v4. 10 chart types, Storybook, 3 layout options.}
Ember _{Next.js 16 + React 19 + Tailwind CSS v4. Clean minimal design, Kanban, Calendar, Chat.}	Flux _{Next.js 16 + React 19 + Tailwind CSS v4. Gradient design, frosted glass UI, startup-native data.}	Admindek _{Bootstrap 5 + vanilla JS. 100+ components, theme customizer, RTL, 10 color palettes.}

Browse All Premium Templates on DashboardPack

Tech Stack

Layer	Technology
Framework	SvelteKit 3 + Svelte 5 (runes API)
Styling	Tailwind CSS 4 + shadcn-svelte
Database	SQLite via Drizzle ORM + better-sqlite3 (WAL mode)
Auth	Better Auth (username + admin plugins) + Argon2id hashing
OAuth	Better Auth social providers (Google + GitHub) -- optional
Charts	LayerChart v2 (D3-based)
Testing	Vitest (unit) + Playwright (E2E)
Linting	ESLint 10 + Prettier

Features

Authentication & Security

Better Auth -- Self-hosted, library-maintained auth wired into SvelteKit (src/lib/server/auth.ts). Session cookies are HttpOnly and HMAC-signed with BETTER_AUTH_SECRET; password-reset tokens are stored hashed.
Argon2id password hashing -- Kept from v1 through Better Auth's custom password.hash/verify, so existing passwords keep working.
Role-based access control -- admin, editor, viewer roles defined once in src/lib/permissions.ts and enforced by Better Auth's admin plugin.
Auto-extending sessions -- Sessions automatically refresh when less than 15 days remain (30-day lifetime).
Session metadata -- User agent and IP address tracked per session for security auditing.
OAuth login (optional) -- Google and GitHub social login via Better Auth. Providers only activate when you set credentials in .env. No credentials = password-only login, no errors.
Password reset flow -- Forgot password page with token-based reset (token hashed in DB).
Screen lock -- Lock screen that requires re-entering your password.

Role-Based Access Control (RBAC)

Three built-in roles with different permission levels:

Role	Capabilities
Admin	Full access -- manage users, change roles, delete accounts, access all settings
Editor	Create and manage content, view analytics and notifications
Viewer	Read-only access to dashboard and content

First registered user automatically gets the admin role.
Admins can promote/demote users between roles.
Role-change confirmation dialogs prevent accidental modifications.

Dashboard

KPI cards -- Total users, active sessions, published pages, and unread notifications with change indicators.
Interactive charts -- Area charts (user registrations over time), bar charts (content by status), pie/donut charts (users by role) powered by LayerChart v2.
Recent activity feed -- Latest user registrations and content updates.
Animated counters -- Dashboard numbers animate from zero on load with easeOutExpo easing.

User Management

Full CRUD operations -- Create, view, edit, and delete users.
Server-side data table -- Sortable columns, search filtering, pagination with configurable page sizes.
Bulk actions -- Delete confirmation dialogs with clear warnings.
User creation dialog -- Admin-only form to create new users with role assignment.
Export -- Download user data as CSV or JSON.

Content Management (CMS)

Page editor -- Create and edit pages with title, slug, content, and template selection.
Templates -- Default, Landing, and Blog page templates.
Publishing workflow -- Draft / Published / Archived status transitions.
Auto-generated slugs -- Slugs generated from titles, editable before save.
Content table -- Filterable by status, sortable, with pagination.
Export -- Download content data as CSV or JSON.

Analytics

User growth charts -- Line/area charts showing registration trends over time.
Content breakdown -- Bar and pie charts showing content distribution by status and template.
Session analytics -- Active session counts and trends.
Notification metrics -- Read vs. unread notification ratios.
Tabbed interface -- Separate tabs for Users, Content, Sessions, and Notifications analytics.

Notifications

In-app notification system -- Info, warning, error, and success notification types.
Notification bell -- Real-time unread count badge in the top navigation bar.
Notification popover -- Quick preview of recent notifications without leaving the current page.
Full notifications page -- View all notifications with mark-as-read and delete actions.
Bulk operations -- Mark all as read, delete all read notifications.

Role Management

Role overview -- View all roles with member counts and permission summaries.
Role-change dialogs -- Confirmation dialogs when changing user roles.
Permission matrix -- Visual display of what each role can do.

Database Management

Table browser -- View all database tables with row counts.
Schema viewer -- Inspect table schemas including column names, types, and constraints.
Data export -- Export any table's data as CSV or JSON.
Admin-only access -- Database management restricted to admin role.

Settings

Profile settings -- Update display name, email, and avatar URL.
Password change -- Change password with current password verification.
Session management -- View all active sessions with device info, IP addresses, and last activity. Revoke individual sessions or all other sessions.
App settings -- Configurable application-level settings stored in the database.
Appearance -- Dark/light mode toggle with system preference detection (persisted via mode-watcher).

Additional Features

Command palette (Cmd+K) -- Keyboard-driven command palette with navigation, live search, and quick actions (toggle theme, create page).
Page view transitions -- Smooth cross-fade between pages via the View Transitions API.
Responsive design -- Fully responsive layout with collapsible sidebar on mobile.
Dark/light mode -- System-aware theme with manual toggle, persisted across sessions.
Breadcrumb navigation -- Auto-generated breadcrumbs from URL pathname.
Apps menu -- Quick-access grid menu for jumping between sections.
Toast notifications -- Svelte Sonner for action feedback (success, error, info).
SEO ready -- OpenGraph and Twitter meta tags via svelte-meta-tags.
Sitemap -- Auto-generated XML sitemap endpoint.
Error page -- Custom error page with navigation back to safety.
Data table pagination -- Reusable pagination component with page size selector.

Upgrading

v2.0 replaces the custom auth with Better Auth. Existing installs keep their users, passwords, and OAuth links, but must run a one-time migration (everyone signs in again):

cp svelteforge.db svelteforge.db.backup   # the script also writes <db>.pre-v2.bak
# 1. Add BETTER_AUTH_SECRET to .env (openssl rand -base64 32)
# 2. Change OAuth redirect URIs to {ORIGIN}/api/auth/callback/{google|github}
pnpm install
pnpm db:migrate-v2   # BEFORE db:push -- moves passwords and OAuth links
pnpm db:push         # should report "No changes detected"

See the upgrade guide for details, including the earlier v1.4 (SvelteKit 3) migration.

Quick Start

Prerequisites

Node.js 22.17+ (24 LTS recommended)
pnpm (install via npm install -g pnpm)

Installation

# Clone the repository
git clone https://github.com/colorlibhq/svelteforge-admin.git
cd svelteforge-admin

# Install dependencies
pnpm install

# Create .env and set BETTER_AUTH_SECRET (openssl rand -base64 32)
cp .env.example .env

# Push database schema (creates SQLite database)
pnpm db:push

# Seed the database with sample data (optional)
pnpm db:seed

# Start the development server
pnpm dev

The app will be running at http://localhost:5173.

Default Login

After seeding, you can log in with:

Username	Password	Role
`admin`	`password123`	Admin
`editor`	`password123`	Editor
`viewer`	`password123`	Viewer

Note: If you skip seeding, the first user to register will automatically be assigned the admin role.

OAuth Setup (Optional)

Social login is entirely optional. When no OAuth credentials are configured, the login page shows only the username/password form -- no errors, no broken buttons.

Google

Go to Google Cloud Console
Create a new OAuth 2.0 Client ID
Set the authorized redirect URI to: http://localhost:5173/api/auth/callback/google
Add your credentials to .env:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret

GitHub

Go to GitHub Developer Settings
Create a new OAuth App
Set the authorization callback URL to: http://localhost:5173/api/auth/callback/github
Add your credentials to .env:

GITHUB_CLIENT_ID=your-client-id
GITHUB_CLIENT_SECRET=your-client-secret

Production

For production, set ORIGIN before building to match your deployed URL. vite.config.ts passes it to SvelteKit 3’s paths.origin; rebuild when it changes:

ORIGIN=https://yourdomain.com

Redirect URIs in your OAuth apps must also be updated to use the production URL.

Commands

# Development
pnpm dev              # Start dev server (http://localhost:5173)
pnpm build            # Production build
pnpm preview          # Preview production build

# Type Checking
pnpm check            # Type-check with svelte-check
pnpm check:watch      # Type-check in watch mode

# Database
pnpm db:push          # Push schema changes to database
pnpm db:generate      # Generate Drizzle migrations
pnpm db:studio        # Open Drizzle Studio GUI
pnpm db:seed          # Seed database with sample data

# Testing
pnpm test             # Run unit tests (Vitest)
pnpm test:watch       # Run tests in watch mode
pnpm test:e2e         # Run E2E tests (Playwright)

# Code Quality
pnpm lint             # Run ESLint
pnpm format           # Format code with Prettier
pnpm format:check     # Check formatting without writing

Project Structure

src/
├── app.css                          # Tailwind CSS 4 theme (OKLCH colors)
├── app.d.ts                         # TypeScript type definitions
├── hooks.server.ts                  # Better Auth session lookup + /api/auth/* handler
├── lib/
│   ├── assets/                      # Static assets (favicon)
│   ├── components/
│   │   ├── ui/                      # shadcn-svelte components
│   │   ├── animated-counter.svelte   # Animated number counter (KPI cards)
│   │   ├── app-sidebar.svelte       # Main navigation sidebar
│   │   ├── apps-menu.svelte         # Quick-access grid menu
│   │   ├── command-palette.svelte   # Cmd+K command palette
│   │   ├── data-table-pagination.svelte
│   │   ├── delete-confirm-dialog.svelte
│   │   ├── notification-bell.svelte # Notification badge + popover
│   │   ├── role-change-dialog.svelte
│   │   ├── theme-toggle.svelte      # Dark/light mode toggle
│   │   └── user-form-dialog.svelte  # Create/edit user form
│   ├── hooks/                       # Svelte 5 reactive utilities
│   ├── server/
│   │   ├── auth.ts                  # Better Auth configuration (plugins, hooks, guards)
│   │   ├── db/
│   │   │   ├── index.ts             # Database connection (WAL mode)
│   │   │   ├── schema.ts            # Drizzle schema (users, sessions, accounts, pages, etc.)
│   │   │   ├── migrate-v2-auth.ts   # One-time v1 → v2 (Better Auth) migration
│   │   │   ├── seed.ts              # Database seeder
│   │   │   └── test-utils.ts        # Test database utilities
│   │   ├── auth-errors.ts           # Better Auth APIError → form-action failure
│   │   ├── email.ts                 # sendAuthEmail() -- plug in your email provider
│   │   ├── id.ts                    # Crypto ID generator
│   │   └── password.ts              # Argon2id hash/verify
│   ├── permissions.ts               # Roles and access-control statements
│   └── utils/
│       ├── export.ts                # CSV/JSON export utilities
│       └── user-agent.ts            # User agent parser
├── routes/
│   ├── (app)/                       # Protected routes (auth required)
│   │   ├── +layout.server.ts        # Auth guard + sidebar data
│   │   ├── +layout.svelte           # App shell (sidebar + topbar)
│   │   ├── +page.svelte             # Dashboard
│   │   ├── analytics/               # Charts and metrics
│   │   ├── content/                 # CMS (pages CRUD)
│   │   ├── database/                # Database browser
│   │   ├── notifications/           # Notification center
│   │   ├── roles/                   # Role management
│   │   ├── settings/                # Profile, password, sessions, app settings
│   │   └── users/                   # User management
│   ├── (auth)/                      # Public auth routes
│   │   ├── forgot-password/
│   │   ├── lock/
│   │   ├── login/                   # Login + OAuth routes
│   │   ├── register/
│   │   └── reset-password/
│   ├── (public)/                    # Public pages
│   │   └── pricing/
│   ├── api/                         # API endpoints
│   └── sitemap.xml/                 # Auto-generated sitemap

Database Schema

Table	Description
`users`	User accounts (email, username, name, avatar, role, ban status)
`sessions`	Better Auth sessions (token, user agent, IP, expiry)
`accounts`	Login methods: `credential` (Argon2id hash) or Google/GitHub links
`verifications`	Hashed password-reset and email-change tokens
`pages`	CMS content (title, slug, content, template, status, author)
`notifications`	In-app notifications (title, message, type, read status)
`app_settings`	Key-value application settings

Deployment

Requirements

SvelteForge Admin uses SQLite with the better-sqlite3 native module. Your hosting environment must support:

Node.js runtime (not edge/serverless)
Native module compilation (better-sqlite3)
Persistent filesystem (for the SQLite database file)

Recommended Hosting

Provider	Tier	Notes
Railway	Free tier available	One-click deploy, persistent volumes
Fly.io	Free tier available	Global edge, persistent volumes
Render	Free tier available	Auto-deploy from GitHub
VPS (DigitalOcean, Hetzner)	From ~$4/mo	Full control, Docker-friendly

Not Compatible

Cloudflare Pages/Workers -- V8 isolates cannot run native Node modules (better-sqlite3)
Vercel Edge -- Same limitation as Cloudflare
AWS Lambda -- No persistent filesystem for SQLite

Docker

A Dockerfile is included for containerized deployments:

docker build --build-arg ORIGIN=https://yourdomain.com -t svelteforge-admin .
docker run -p 3000:3000 -e BETTER_AUTH_SECRET="$(openssl rand -base64 32)" -v ./data:/app/data svelteforge-admin

Environment Variables

# Required
DATABASE_URL=svelteforge.db        # SQLite database file path

# Required for production
ORIGIN=https://yourdomain.com      # Set before building and at runtime for OAuth
BETTER_AUTH_SECRET=                # Signs session cookies; openssl rand -base64 32

# Optional -- also append auth emails (reset links) to a JSONL file in development
AUTH_EMAIL_OUTBOX=

# Optional -- OAuth providers (omit to disable)
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

# Optional -- enable demo-mode protections (see Demo Mode section below)
DEMO_MODE=false

Demo Mode

Set DEMO_MODE=true when running a public demo of the dashboard (for example, the live site at svelteforge.dashboardpack.com). This unlocks two things that are invisible in a normal deployment:

Admin-only "Demo" tab in Settings with a Reset Demo Data Now button that wipes the database and re-seeds it from src/lib/server/db/seed.ts.
Self-modification guard on the demo user. The seed creates a shared demo / SvelteDemo2026! viewer account that the login page pre-fills. When DEMO_MODE=true, the updateProfile and changePassword settings actions refuse to touch the demo account so one visitor can't rename it or rotate its password and lock everyone else out.

For a fully automated demo, run the seed on a schedule. The reference preview server uses a deploy-user crontab plus a small wrapper:

# /usr/local/bin/svelteforge-reset-demo
#!/usr/bin/env bash
set -euo pipefail
[ "${DEMO_MODE:-false}" = "true" ] || { echo "DEMO_MODE not enabled, refusing"; exit 1; }
cd /var/www/svelteforge
exec /usr/bin/pnpm db:seed

# crontab -e (as the deploy user)
10 * * * * /usr/local/bin/svelteforge-reset-demo >> /var/log/svelteforge-reset.log 2>&1

To make sure PM2 picks up DEMO_MODE across restarts, run from an ecosystem file rather than pm2 start build/index.js directly:

// ecosystem.config.cjs
module.exports = {
	apps: [
		{
			name: "svelteforge",
			script: "build/index.js",
			cwd: "/var/www/svelteforge",
			node_args: "--env-file=.env",
			env: { NODE_ENV: "production", PORT: 3000, DEMO_MODE: "true" },
		},
	],
};

pm2 delete svelteforge && pm2 start ecosystem.config.cjs && pm2 save

Leave DEMO_MODE unset (or false) on real deployments -- the reset button and demo-user guard stay hidden, behaving as a normal admin dashboard.

Customization

Adding shadcn-svelte Components

npx shadcn-svelte@latest add <component-name>

Components are installed to src/lib/components/ui/. Do not edit them directly -- re-run the add command to update.

Theming

Edit src/app.css to customize the color palette. SvelteForge Admin uses Tailwind CSS 4's native CSS theming with OKLCH colors and CSS custom properties for light/dark mode.

Adding New Routes

Create a new directory under src/routes/(app)/ for protected routes
Add +page.svelte and +page.server.ts
The auth guard in (app)/+layout.server.ts automatically protects new routes
Add a sidebar link in src/lib/components/app-sidebar.svelte

Database Changes

Edit src/lib/server/db/schema.ts
Run pnpm db:push to apply changes
Update src/lib/server/db/test-utils.ts SCHEMA_SQL if you have tests

Testing

# Run all unit tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run E2E tests (creates and seeds a separate .svelte-kit/e2e.db)
pnpm test:e2e

Browser tests automatically prepare a disposable database; they never use svelteforge.db.

Unit tests use an in-memory SQLite database created via test-utils.ts, so they don't touch your development database.

License

MIT

Built with SvelteKit, Svelte 5, Tailwind CSS 4, Drizzle ORM, and shadcn-svelte by Colorlib.

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
drizzle		drizzle
e2e		e2e
screenshots		screenshots
scripts		scripts
src		src
static		static
.dockerignore		.dockerignore
.env.example		.env.example
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
Dockerfile		Dockerfile
README.md		README.md
components.json		components.json
drizzle.config.ts		drizzle.config.ts
eslint.config.js		eslint.config.js
package.json		package.json
playwright.config.ts		playwright.config.ts
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation