This is a modern dashboard starter template that uses TanStack Start as its full-stack React framework, paired with TypeScript for type safety and shadcn/ui for component design.
It includes pre-configured authentication setup with Better Auth, advanced data tables powered by TanStack React Table, and interactive charts using Recharts.
The template is great for applications such as analytics platforms, administrative backends, or any system that needs to present data and manage user inputs through a structured, component-based user interface.
Features
🚀 Built on TanStack Start for modern full-stack development.
🎨 Shadcn/ui component library for consistent and accessible design.
📱 Responsive design with Tailwind CSS for mobile-first development.
🛡️ TypeScript configuration with strict type checking for code reliability.
🔐 Better Auth integration ready for authentication implementation.
📊 TanStack React Table with server-side pagination, filtering, and sorting.
📈 Recharts integration for interactive data visualization and analytics.
🎭 Dark and light theme support with theme persistence.
📋 Multiple form solutions using TanStack React Form and React Hook Form.
🔄 TanStack React Query for data fetching and caching.
🎯 File-based routing with type-safe navigation.
🧪 ESLint and Prettier configuration for code quality and consistency.
Preview
Use Cases
- Admin dashboards for SaaS applications requiring user management and analytics displays.
- Business intelligence platforms that need complex data tables and chart visualizations.
- E-commerce management systems with product catalogs and order tracking interfaces.
- Internal company tools for project management, HR systems, or inventory management.
- Customer portals with account settings, billing information, and usage analytics.
How to Use It
1. Download the project files to your local machine by cloning the GitHub repository.
git clone https://github.com/kiranism/tanstack-start-dashboard.git2. Navigate into the newly created project directory and install all the necessary libraries and packages defined in the package.json file.
cd tanstack-start-dashboard
pnpm install3. Start the local development server. The application will now be running at http://localhost:3001.
pnpm run dev4. Config & customize your application:
- Configure your authentication system by examining the Better Auth setup in the template. The authentication configuration files are located in the lib directory. You can customize the authentication providers, user schema, and session management according to your project requirements.
- Customize the dashboard layout by modifying the components in the components directory. The app-sidebar.tsx file controls the navigation menu, while user-nav.tsx handles the user dropdown interface. The template uses a feature-based organization structure, so related components are grouped together in the features directory.
- Add new pages by creating files in the routes directory. TanStack Start uses file-based routing, so creating a new file automatically generates a corresponding route. Each route file can export React components and handle both client-side and server-side logic.
- Modify the data tables by working with the TanStack React Table implementation in the products feature. The table supports server-side operations, including pagination, sorting, and filtering. You can extend the table functionality by adding new columns, custom cell renderers, or additional filtering options.
- Integrate your API endpoints by updating the data layer files in the data directory. The template includes examples of how to structure API calls using TanStack React Query for caching and error handling.
5. When you are ready to deploy your application, you must create an optimized production build.
pnpm run build6. Start the production server to serve the optimized application.
pnpm run startRelated Resources
- TanStack Start Documentation – Official documentation for the full-stack React framework with comprehensive guides and API references.
- Shadcn/ui Component Library – Complete component library with copy-paste components and design system guidelines.
- TanStack React Table – Headless table library documentation with advanced examples and customization options.
- Better Auth Documentation – Authentication library documentation with integration guides and security best practices.
FAQs
Q: Does this template support database integration out of the box?
A: The template provides the structure for database integration through the data layer, but you need to configure your preferred database solution and ORM according to your project requirements.
Q: Can I add more authentication providers beyond the Better Auth setup?
A: Yes, Better Auth supports multiple authentication providers, including OAuth, email/password, and social logins. You can configure additional providers in the authentication configuration files.
Q: Is this template suitable for large-scale enterprise applications?
A: The template is designed with scalability in mind using feature-based organization and TypeScript for maintainability, making it suitable for enterprise applications with proper architecture planning.
Q: How do I customize the theme colors and design system?
A: You can customize the theme by modifying the Tailwind CSS configuration and updating the CSS custom properties in the styles directory to match your brand colors and design preferences.
