Dashboard Starter

A modern, beautiful dashboard starter template with mock authentication and a complete UI component library. Built with React, TypeScript, TanStack Router, and Tailwind CSS.

Features

• 🎨 Beautiful UI Components - Full shadcn/ui component library with dark/light theme
• 🔐 Zustand Authentication - Mock auth using Zustand with localStorage persistence
• 🏢 Organization Management - Multi-organization support with switcher
• 📱 Responsive Design - Works perfectly on desktop, tablet, and mobile
• ⚡ Fast Development - Hot reload with Vite
• 🎯 Type Safe - Full TypeScript support
• 🎨 Customizable - Easy to modify and extend
• 🔍 Command Palette - Quick navigation with keyboard shortcuts
• 📚 Cursor AI Ready - Comprehensive rules for AI-assisted development

Tech Stack

• Framework: React 19
• Build Tool: Vite 7
• Routing: TanStack Router
• Styling: Tailwind CSS 4
• UI Components: Radix UI + shadcn/ui
• State Management: Zustand
• Icons: Lucide React
• Type Checking: TypeScript

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone or navigate to the dashboard-starter directory:

cd dashboard-starter

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The app will open at http://localhost:5173 (or another port if 5173 is in use).

Project Structure

dashboard-starter/
├── src/
│   ├── components/
│   │   ├── auth/              # Authentication forms (signin, signup)
│   │   ├── layout/            # Layout components (sidebar, header, footer)
│   │   ├── shared/            # Shared components (theme provider, toggle)
│   │   └── ui/                # UI component library (shadcn/ui)
│   ├── hooks/
│   │   ├── use-auth.ts        # Authentication hook (uses Zustand)
│   │   ├── use-organization.ts # Organization management hook
│   │   ├── use-mobile.ts      # Mobile detection hook
│   │   └── use-command-palette.ts # Command palette hook
│   ├── lib/
│   │   ├── mock-data.ts       # Mock data (users, organizations, stats)
│   │   └── utils.ts           # Utility functions
│   ├── routes/
│   │   ├── __root.tsx         # Root route
│   │   ├── index.tsx          # Home page (redirects)
│   │   ├── (auth)/            # Auth routes (login, signup)
│   │   └── (app)/             # Protected app routes
│   │       ├── layout.tsx     # App layout with sidebar
│   │       └── overview/      # Overview dashboard page
│   ├── stores/
│   │   ├── index.ts
│   │   ├── auth-store.ts      # Authentication state (Zustand)
│   │   └── organization-store.ts  # Organization state (Zustand)
│   ├── main.tsx               # App entry point
│   ├── index.css              # Global styles
│   └── vite-env.d.ts
├── public/                    # Static assets
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md

Usage

Authentication

The dashboard uses Zustand for state management with localStorage persistence. Authentication is mocked - you can sign in with any email and password (minimum 8 characters).

Store: src/stores/auth-store.ts Hook: useAuth() from src/hooks/use-auth.ts Login: Navigate to /login Signup: Navigate to /signup

See ZUSTAND_AUTH.md for detailed documentation.

Mock Data

All data is mocked and stored in src/lib/mock-data.ts. This includes:

• User Data: Name, email (stored in localStorage after login)
• Organizations: Demo Company, Acme Corp, Tech Startup
• Dashboard Stats: Projects count, team members, etc.

Adding New Pages

1. Create a new route file in src/routes/app/:

// src/routes/app/settings/index.tsx
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/app/settings/')({
  component: SettingsPage,
});

function SettingsPage() {
  return (
    <div>
      <h1>Settings</h1>
      {/* Your content */}
    </div>
  );
}

2. Add the route to the sidebar in src/components/layout/sidebar.tsx:

const navigationItems = [
  {
    title: "Overview",
    url: "/overview",
    icon: LayoutDashboard,
  },
  {
    title: "Settings",
    url: "/settings",
    icon: Settings,
  },
]

Customization

Change Theme Colors

Edit src/index.css to modify the color scheme:

@layer base {
  :root {
    --primary: 262.1 83.3% 57.8%;
    /* ... other colors */
  }
}

Modify Mock Data

Edit src/lib/mock-data.ts to change default organizations, stats, or user data.

Add Backend Integration

Replace the mock authentication with your real API:

1. Update src/stores/auth-store.ts to call your backend API
2. Add JWT token management to the auth store
3. Update src/hooks/use-organization.ts to fetch real data
4. Remove src/lib/mock-data.ts once you have real data

See ZUSTAND_AUTH.md for integration examples.

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

UI Components

The dashboard includes a complete UI component library from shadcn/ui:

• Buttons, Inputs, Forms
• Dialogs, Modals, Popovers
• Tables, Cards, Badges
• Navigation, Menus, Breadcrumbs
• Charts, Progress bars
• And many more...

All components are fully typed and customizable. See src/components/ui/ for the complete list.

Keyboard Shortcuts

• Cmd/Ctrl + K - Open command palette

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT License - feel free to use this starter for your projects!

Support

For questions or issues, please open an issue in the repository.

---

Note: This is a frontend-only dashboard starter. All data is mocked and stored in localStorage. You'll need to integrate with your backend API to make it production-ready.

Cursor AI Integration

This starter includes comprehensive Cursor AI rules in .cursor/rules/:

• project_guide.mdc - Main guide with architecture, patterns, and best practices
• authentication.mdc - Authentication patterns and integration guides
• components.mdc - Component conventions and styling patterns
• routing.mdc - TanStack Router conventions and examples

Using with Cursor AI

The AI automatically uses these rules to provide context-aware assistance:

"How do I add a new protected page?"
"Show me the authentication pattern"
"How should I structure this component?"

See .cursor/rules/README.md for complete documentation.

Next Steps

1. Add Your Backend API - Replace mock data with real API calls
2. Add More Pages - Build out your dashboard with additional routes
3. Customize Styling - Adjust colors, fonts, and layouts to match your brand
4. Add Analytics - Integrate analytics tracking
5. Deploy - Deploy to Vercel, Netlify, or your preferred hosting platform

Happy building! 🚀