SaaS Dashboard Kit
Vite + Hono full-stack SaaS template. $149.
The OTF SaaS Dashboard Kit is a complete, deployable SaaS starter. Vite + React 19 + Hono backend + Postgres + Better Auth + Stripe. Live at saas.otf-kit.dev.
Stack
| Layer | Choice |
|---|---|
| Framework | Vite 6 + React 19 (SPA) |
| Routing | TanStack Router (hand-wired in src/main.tsx) |
| Data | TanStack Query (staleTime: 10s, optimistic updates) |
| Server | Hono 4 + Bun 1.3 (same process serves API + static SPA) |
| DB | Postgres + Drizzle ORM 1.0-beta |
| Auth | Better Auth 1.3 — email + Google OAuth + demo login |
| UI | @otfdashkit/ui (Radix + Tailwind, token-driven theming) |
| Payments | Stripe Checkout + webhook + Resend license email |
| Deploy | Railway via scripts/deploy-railway.sh |
Pre-built screens
The kit ships with 9 screens that mirror what every B2B SaaS needs:
| Screen | Path | What's there |
|---|---|---|
| Landing | / | Public marketing landing |
| Login / Signup | /auth/login, /auth/signup | 2-col hero + email/password + Google + demo login |
| Dashboard | /home/dashboard | KPIs + AreaChart + BarChart + Timeline |
| Tasks | /home/tasks | All issues — RecordTable + IssueDetail Sheet |
| Issues board | /home/issues-board | Kanban (5 status columns) |
| Issues backlog | /home/issues-backlog | Drag-orderable backlog grouped by priority |
| Inbox | /home/inbox | SplitPage notifications inbox |
| Analytics | /home/analytics | BarChart / LineChart / BarList / ActivityHeatmap |
| Projects | /home/projects | Projects list + create/delete |
| Project detail | /home/projects/:id | Single project with team + tasks |
| Teams | /home/teams | Members table + GridList + Sheet |
| Settings | /home/settings | Profile / Workspace / Notifications / Appearance |
Database
- 5 Better-Auth tables:
user,account,session,jwks,verification - 12 app tables:
userPublic,workspace,team,teamMember,project,issue,label,issueLabel,comment,attachment,notification,savedView
bun run db:generate produces clean SQL. bun run db:migrate applies it. bun run db:seed
loads a deterministic 4-user / 5-project / 50-issue seed.
Conventions
The kit follows the patterns documented in CLAUDE.md:
- Hooks: every entity gets a TanStack Query hook with optimistic updates. Copy
src/hooks/useProjects.ts. - Routes: every entity gets a Hono router under
server/routes/. Copyserver/routes/projects.ts. - Screens: wrap content in
<FadeIn>then<Page>/<PageHeader>/<PageBody>. Add the route insrc/main.tsx. Add a sidebar item insrc/components/Sidebar.tsx. - Theming:
@otfdashkit/tokensCSS imported first,@otfdashkit/ui/stylessecond. Pre-paint default inindex.htmlto avoid FOUC. - Charts:
hsl(var(--chart-1))etc. Deep-clone data withdata.map(d => ({...d})).
Adding things
The kit's ai/prompts/ folder has
20+ tested prompts for common tasks: add a CRUD entity, add a chart, add a screen, swap auth
provider, swap payment provider, etc. Each prompt is a copy-paste-into-Claude/Cursor template.
Deploy
bash scripts/deploy-railway.shThe script auto-sources RAILWAY_API_TOKEN from repo-root .env, builds the workspace deps,
swaps workspace:* → latest from npm, and runs railway up. Restoring package.json is
handled by a trap on script exit.
Required env
| Variable | Purpose |
|---|---|
DATABASE_URL | Postgres connection string |
BETTER_AUTH_SECRET | 32+ chars — signs sessions/JWTs |
BETTER_AUTH_URL | Public origin (e.g. https://your-app.com) |
STRIPE_SECRET_KEY | Stripe live/test secret |
STRIPE_WEBHOOK_SECRET | Stripe webhook signing secret |
RAILWAY_API_TOKEN | Read by deploy script |
Optional: GOOGLE_CLIENT_ID + GOOGLE_CLIENT_SECRET for Google sign-in. DEMO_LOGIN_DISABLED=1
hides the demo button. RAILWAY_STATIC_URL adds Railway's URL to the CORS allowlist.
Buy
$149 on otf-kit.dev — or get the Starter Bundle ($249 = SaaS Dashboard + Fitness Kit + future kits).