For years, the standard playbook for scaffolding a React admin dashboard was to install a massive UI library like MUI or AntDesign. It gets you moving fast on day one, but by month three, you are fighting specificity wars, overriding inline styles, and staring at a massive JavaScript bundle.
I wanted a clean break from that workflow. I needed an architecture that gave me complete design control without sacrificing performance. So, I built and open-sourced Exo-Dash (available free on GitHub) ā a dashboard boilerplate built on a primitive, "shadcn-like" architecture using React 19 and Tailwind CSS v4.
Here is how the stack is structured to prioritize speed and developer experience.
The "Shadcn-like" UI Foundation
Instead of importing a monolithic library, the UI relies on a lightweight primitive architecture. This means no overriding CSS conflicts and complete control over the markup.
-
Variant Management:
class-variance-authority(CVA) handles size and style variants dynamically. -
Class Merging:
clsxandtailwind-mergesafely combine arbitrary Tailwind classes. -
Iconography:
lucide-reactprovides scalable, consistent SVG icons. -
Styling Engine: Driven entirely by Tailwind CSS v4 via the new
@tailwindcss/viteplugin.
Forms Without the Render Penalties
Complex dashboards require complex data entry. To prevent unnecessary re-renders during typing, the template relies strictly on uncontrolled components.
-
State: Managed by
react-hook-formto keep the UI snappy. -
Validation: Schema-based validation handled synchronously via
zodand@hookform/resolvers.
Modern Routing and Performance
To keep the Time to Interactive (TTI) near-instant, the application aggressively splits code. You only download the JavaScript required for your active view.
- Build Tool: Bootstrapped with Vite for lightning-fast Hot Module Replacement.
-
Routing: React Router v7 utilizing the modern object-based Data API (
createBrowserRouter). -
Lazy Loading: All heavy routes (Kanban, Analytics, Calendars) are deferred using
React.lazy()and<Suspense>. -
Complex UI: Drag-and-drop powered by
@hello-pangea/dndand charting handled byreact-chartjs-2.
Dynamic Custom Theming
A dashboard needs to adapt to the user's environment seamlessly. The app features a dedicated global useTheme context that overrides the DOM at the root level and persists to localStorage.
- Supports automatic system preference detection for Light/Dark modes.
- Injects dynamic color schemes on the fly (Blue, Zinc, Rose, Green).
If you are tired of fighting your UI library and want a clean, typed (TypeScript v5.7) starting point for your next project, you can grab the fully open-source Community Edition on GitHub.
š Check out the live demo here
š Get the source code here
š View the docs code here
(P.S. If you need advanced layouts, auth screens, and commercial rights, there is a Pro version available too!)
How does this structure feel to you?
