Multidash

Free & open-source admin dashboard template built with Next.js 16, React 19, TypeScript, Tailwind CSS v4 and Radix UI.

Clean, accessible and responsive — with light/dark mode, colorblind-safe charts and a reusable component library you can drop into any Next.js project.

Live demo · Get Multidash Pro · Report a bug

---

✨ Features

• ⚡ Next.js 16 App Router + React 19
• 🔷 TypeScript in strict mode — every component, page and helper is fully typed
• 🎨 Tailwind CSS v4 with a single token file for rebranding
• 🌗 Light / dark / system theme plus a theme customizer — primary color, backgrounds, card style, radius and monochrome
• 📊 Charts with Recharts — colorblind-safe palette, tooltips, screen-reader data tables
• 🧩 35 UI components (@multidash/ui) built on Radix UI primitives — each with docs, live examples and copy-paste code
• 📱 Fully responsive — minimizable sidebar on desktop (⌘B), drawer on mobile
• ♿ Accessible — keyboard navigation, ARIA labels, reduced-motion support
• 📦 Turborepo monorepo — share the UI package across apps

Included pages

🚀 Getting started

Requirements: Node.js 20+ and pnpm (corepack enable pnpm).

git clone https://github.com/hasraltechno/multidash.git
cd multidash
pnpm install
pnpm dev

Open http://localhost:3000.

Environment variables

All optional — copy apps/demo/.env.example to apps/demo/.env.local to use them.

📁 Project structure

multidash/
├── apps/
│   └── demo/                 # Next.js dashboard app
│       ├── app/(dashboard)/  # Pages with sidebar layout
│       ├── app/(auth)/       # Sign in / sign up
│       ├── components/       # App-specific components & charts
│       └── lib/              # Navigation, mock data, helpers
└── packages/
    ├── ui/                   # @multidash/ui — shared components & theme tokens
    └── typescript-config/    # Shared tsconfig presets

🎨 Customization

Set your own domain in apps/demo/lib/site.ts (productionUrl) or via the NEXT_PUBLIC_SITE_URL environment variable — it is used for Open Graph and canonical URLs.

All colors live in packages/ui/src/styles/globals.css. Change --primary (and --primary-text) to rebrand; chart colors (--chart-1 … --chart-5) are a validated colorblind-safe order — keep the order if you swap hues.

The theme customizer presets live in apps/demo/app/theme-presets.css — add your own by following the same pattern.

Status colors (info, success, warning, destructive, highlight) each have three roles, so bright fills never compromise text contrast:

Use a component anywhere in the app:

import { Button } from "@multidash/ui/components/button"

<Button variant="outline">Click me</Button>

💎 Multidash Pro

Need more? Multidash Pro builds on this free version with everything you need to ship a real product:

👉 See pricing & join the waitlist

🤝 Contributing

Issues and pull requests are welcome — see CONTRIBUTING.md. If Multidash saves you time, please consider giving it a ⭐ — it really helps!

📄 License

MIT © Hasral Techno