Better Auth Admin Dashboard

Admin dashboard starter built with Next.js 16, better-auth, shadcn/ui, Tailwind CSS, TypeScript

Overview

A production-ready admin dashboard built with Next.js 16, better-auth, Shadcn UI, TypeScript, and Tailwind CSS. Designed for SaaS apps, internal tools, and admin panels with self-hosted authentication and multi-tenant workspaces out of the box.

Tech Stack

• Framework - Next.js 16
• Language - TypeScript
• Auth - better-auth (self-hosted, SQLite via Drizzle)
• Auth UI - better-auth-ui
• Error tracking - Sentry
• Styling - Tailwind CSS v4
• Components - Shadcn-ui
• Charts - Recharts
• Schema Validations - Zod
• Data Fetching - TanStack React Query
• State Management - Zustand
• Search params state manager - Nuqs
• Tables - Tanstack Data Tables
• Forms - TanStack Form + Zod
• Command+k interface - kbar
• Linter / Formatter - OxLint / Oxfmt
• Pre-commit Hooks - Husky
• Themes - tweakcn

Features

• Admin dashboard layout — sidebar, header, content area
• Analytics overview — cards and charts with parallel route loading
• Data tables — React Query prefetch, client-side cache, search, filter & pagination
• Authentication — self-hosted via better-auth with better-auth-ui components
• Multi-tenant workspaces — organization plugin (create, switch, manage teams)
• RBAC navigation — client-side nav filtering by org, role, permission
• Multi-theme support — 10+ themes with easy switching
• Feature-based folder structure — scalable project organization
• Command+K — global search and navigation via kbar

Pages

Page	Description
Sign In / Sign Up	Authentication via better-auth-ui components
Dashboard Overview	Analytics cards with Recharts, parallel routes for independent loading
Product List	TanStack Table + React Query with nuqs URL state for search, filter, pagination
Create/Edit Product	TanStack Form + Zod with useMutation and cache invalidation
Users	Users table with React Query + nuqs pattern
Profile	Account management via better-auth-ui components
Workspaces	Organization management via better-auth-ui <OrganizationsCard />
Team Management	Member/role management via better-auth-ui <OrganizationSettingsCards />
Users Info	Organization members overview
Not Found	Custom 404 page

Project Structure

src/
├── app/                           # Next.js App Router
│   ├── auth/                      # Auth pages (sign-in, sign-up)
│   ├── dashboard/                 # Dashboard routes
│   │   ├── overview/              # Analytics with parallel routes
│   │   ├── product/               # Product CRUD pages
│   │   ├── users/                 # Users table
│   │   ├── workspaces/            # Org management & teams
│   │   ├── billing/               # Users info
│   │   └── profile/               # User profile
│   └── api/                       # API routes
│
├── components/                    # Shared components
│   ├── ui/                        # shadcn/ui primitives
│   ├── layout/                    # Layout (sidebar, header)
│   ├── themes/                    # Theme system
│   └── kbar/                      # Command+K interface
│
├── features/                      # Feature-based modules
│   ├── auth/                      # Auth components
│   ├── overview/                  # Dashboard analytics
│   ├── products/                  # Product management (React Query + nuqs)
│   ├── users/                     # User management (React Query + nuqs)
│   └── profile/                   # Profile management
│
├── lib/                           # Core utilities
├── hooks/                         # Custom hooks
├── config/                        # Navigation config
├── constants/                     # Mock data
├── styles/                        # Global CSS & themes
└── types/                         # TypeScript types

Getting Started

Note

Requires Node.js 18+ or Bun.

git clone https://github.com/bogdantarasenko/better-auth-admin.git
cd better-auth-admin
npm install

Create a .env.local file:

cp env.example.txt .env.local

Configure the required environment variables (see below), then:

npm run dev

The app will be available at http://localhost:3000.

Environment Variables

Required — Authentication (better-auth)

BETTER_AUTH_SECRET=    # Generate with: openssl rand -base64 32
BETTER_AUTH_URL=http://localhost:3000
DATABASE_PATH=./sqlite.db

Optional — Sentry Error Tracking

NEXT_PUBLIC_SENTRY_DSN=
NEXT_PUBLIC_SENTRY_ORG=
NEXT_PUBLIC_SENTRY_PROJECT=
SENTRY_AUTH_TOKEN=
NEXT_PUBLIC_SENTRY_DISABLED="true"  # Set to "true" to disable in dev

For detailed auth setup (including organizations and teams), see docs/auth_setup.md.

Cleanup

Remove optional features you don't need:

node scripts/cleanup.js --interactive   # interactive mode
node scripts/cleanup.js --list          # see available features
node scripts/cleanup.js --dry-run notifications  # preview before removing
node scripts/cleanup.js notifications            # remove specific features

Run node scripts/cleanup.js --help for all options. Delete scripts/cleanup.js when you're done.

Deploy

Production-ready Dockerfiles included (Dockerfile for Node.js, Dockerfile.bun for Bun) using standalone output mode.

# Build
docker build -t better-auth-admin .

# Run
docker run -d -p 3000:3000 \
  -e BETTER_AUTH_SECRET=your-secret \
  -e BETTER_AUTH_URL=https://your-domain.com \
  -e DATABASE_PATH=/data/sqlite.db \
  --restart unless-stopped \
  better-auth-admin

For all deployment options, see the Next.js Deployment Documentation.

Documentation

• Auth Setup — better-auth configuration guide
• Navigation RBAC — access control documentation
• Themes — theme customization guide
• Forms — form system documentation

Credits

Based on next-shadcn-dashboard-starter by Kiran.

License

MIT