A sleek, responsive dashboard template built with Tanstack Start, Tailwind CSS v4, and shadcn/ui. Features a modern admin interface with dark mode, interactive charts, and reusable components.
- Tanstack Start - Modern React framework with file-based routing
- Tailwind CSS v4 - Latest utility-first CSS framework
- shadcn/ui - Accessible, pre-built components
- TypeScript - Full type safety throughout the application
- Responsive Design - Mobile-first approach with collapsible sidebar
- Dark/Light Mode - Theme toggle with persistent preferences
- Interactive Charts - Recharts integration for data visualization
- Data Tables - Sortable and paginated tables
- Authentication Pages - Ready-to-use sign-in/sign-up forms
- Modern UI Components - Cards, metrics, notifications, and more
- Framework: Tanstack Start (React Router)
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui + Radix UI
- Charts: Recharts
- Forms: React Hook Form + Zod validation
- Icons: Lucide React
- Build Tool: Vite
- Language: TypeScript
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone https://github.com/your-username/haslab-ui.git
cd haslab-ui- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:3000
npm run build
npm start/
├── app/ # Application routes and pages
│ ├── dashboard/ # Dashboard pages
│ ├── auth/ # Authentication pages
│ └── __root.tsx # Root layout
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (shadcn/ui)
│ ├── dashboard/ # Dashboard-specific components
│ └── theme/ # Theme provider and utilities
├── lib/ # Utilities and shared logic
└── screenshot/ # Project screenshots
Edit the CSS variables in app/globals.css to customize the color scheme:
:root {
--color-primary: hsl(235 85% 62%);
--color-background: hsl(215 33% 98%);
/* ... more variables */
}Use the shadcn CLI to add new components:
npx shadcn@latest add [component-name]All components use Tailwind CSS classes and CSS custom properties for consistent theming.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production server
The project uses Tailwind CSS v4 with CSS custom properties for theming. The styling is organized in:
- Global styles in
app/globals.css - Component-specific styles using Tailwind classes
- Dark mode support via CSS custom properties
- Dashboard Overview - Main dashboard with metrics and charts
- Analytics - Data visualization and analytics
- Tables - Data tables with sorting and pagination
- Settings - Configuration and preferences
- Authentication - Sign in and sign up pages
- Header - Navigation with breadcrumbs and search
- Sidebar - Collapsible navigation menu
- Metric Cards - Display key metrics with trends
- Charts - Revenue, sales, and product analytics
- Notification System - Toast notifications
- Theme Toggle - Dark/light mode switching
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Tanstack for the amazing React framework
- Tailwind CSS for the utility-first CSS framework
- shadcn/ui for the beautiful component library
- Radix UI for accessible primitives
- Recharts for chart components
Built with ❤️ using modern web technologies.