A production-ready starter template built with the TanStack ecosystem and shadcn/ui, providing a solid foundation for modern full-stack applications.
Unlike minimal starters, this template already includes authentication, multi-tenancy, a complete application layout, theme management, validation, and a scalable project structure, allowing you to focus on your business logic instead of boilerplate.
- ⚡ TanStack Start
- 🧭 TanStack Router (File-based Routing)
- 🔄 TanStack Query
- ✅ TanStack Form
- 📝 Zod validation
- 🎨 shadcn/ui
- 🌙 Light / Dark / System theme
- 💾 Persistent theme and sidebar state
- 📂 Responsive collapsible sidebar
- 🧩 Icon-only sidebar mode
- 👤 User menu
- 🍞 Dynamic breadcrumbs
- 🔔 Notifications popover
- ✨ Framer Motion animations
- 🍞 Sonner toast notifications
- 🔐 Authentication using TanStack Server Functions
- 🍪 Secure session management
- 🔑 Argon2 password hashing
- 🏢 Multi-tenant architecture
- 🔀 Built-in tenant switcher
- 🗄️ Kysely Query Builder
- ☁️ Supabase integration example
- 📅 Luxon utilities
- 🎯 TypeScript-first architecture
This project is designed as a practical starting point for real-world applications such as:
- SaaS platforms
- Admin panels
- Dashboards
- CRM systems
- Business applications
- Internal tools
Instead of starting from an empty project, you'll already have:
- Authentication
- Multi-tenancy
- Responsive layout
- Theme management
- Shared validation
- Session handling
- Production-ready project organization
Screenshots and GIFs coming soon.
- React 19
- TypeScript
- TanStack Start
- TanStack Router
- TanStack Query
- TanStack Form
- Tailwind CSS v4
- shadcn/ui
- Radix UI
- Framer Motion
- Lucide React
- Sonner
- TanStack Server Functions
- Kysely
- Microsoft SQL Server (Tedious)
- Argon2
Validation is powered by Zod across the entire application.
Schemas are reused whenever possible to provide end-to-end type safety.
Validation is already integrated with:
- Route search parameters
- TanStack Form schemas
- Server Function input validation
- Shared domain models
This ensures a consistent validation strategy across both client and server.
The template already provides a complete application shell.
Included components:
- Responsive sidebar
- Collapsible sidebar
- Icon-only sidebar mode
- Dynamic breadcrumbs
- User menu
- Notification popover
- Responsive toolbar
- Mobile-friendly navigation
Three theme modes are supported:
- Light
- Dark
- System
The selected theme is automatically persisted.
The sidebar automatically remembers whether it is:
- Expanded
- Collapsed
- Icon-only
Its state is persisted across sessions.
Authentication is entirely server-driven using TanStack Start Server Functions.
Included:
- Login
- Logout
- Session creation
- Session validation
- Protected routes
- Secure password hashing (Argon2)
The implementation intentionally remains lightweight and framework-native.
Multi-tenancy is already integrated.
Features include:
- Tenant switcher
- Active tenant selection
- Tenant-aware architecture
- Easy extension for custom permission systems
The default implementation uses:
- Microsoft SQL Server
- Kysely Query Builder
The project has been structured to make replacing the database provider straightforward.
Kysely supports many SQL dialects.
For other providers, refer to the official documentation:
A complete Supabase integration example is included.
The repository already contains:
- Client configuration
- Server configuration
- Authentication example
- Server Functions
- Project structure
Supabase generates database types specific to your own project.
Before using the included integration, you must generate your own database types and replace the placeholder types.
After generating the types, update:
client.tsserver.ts
to use your generated Database type.
- Node.js 20+
- npm
git clone <repository-url>
cd tanstack-start-templatenpm installCreate your environment file.
cp .env.example .envConfigure the required values.
The project already contains the necessary configuration to support different database providers.
By default the template uses Microsoft SQL Server.
Update your connection string inside .env.
If you prefer another database provider, simply configure the appropriate Kysely dialect.
More information:
npm run devnpm run buildnpm run startsrc/
│
├── components/
├── routes/
├── server/
├── providers/
├── hooks/
├── db/
├── lib/
├── utils/
├── models/
└── styles/
The folder organization is intentionally modular to make future extensions simple.
Validation is one of the core concepts of the template.
Zod is used consistently across the application.
Current integrations include:
- Route search validation
- Form validation
- Server Function parameter validation
This provides a fully typed experience from the browser to the server.
The default implementation includes:
- Login
- Logout
- Password hashing
- Session creation
- Session validation
- Protected routes
Not included:
- ❌ User registration
- ❌ Password reset
- ❌ Email verification
- ❌ OAuth providers
Those features are intentionally left out so they can be implemented according to each project's business requirements.
The project has been designed to be easily extensible.
You can replace or customize:
- Database provider
- Authentication provider
- Session implementation
- Tenant logic
- UI components
- Theme provider
- Permission system
without changing the overall project architecture.
Current features:
- ✅ Authentication
- ✅ Session management
- ✅ Multi-tenancy
- ✅ Theme support
- ✅ Responsive layout
- ✅ Dynamic breadcrumbs
- ✅ Notifications
- ✅ Kysely integration
- ✅ Supabase example
- ✅ Shared Zod validation
Planned:
- ⏳ Sign Up
- ⏳ Password reset
- ⏳ Email verification
- ⏳ OAuth examples
Contributions, ideas, bug reports and pull requests are welcome.
If you find this template useful, feel free to improve it or adapt it to your own projects.
Released under the MIT License.