Tivo — React Admin Dashboard Template (React + TypeScript + Tailwind + ApexCharts)

Tivo is a premium, production-minded admin dashboard template that lets you stop fighting boilerplate and start shipping the screens your product actually needs. It's a real React 18 + TypeScript codebase — not an HTML mockup — wrapped in a deep, focused dark UI (with a full light theme too) that makes your metrics the brightest thing on the screen.

This is a runnable source project, not a static export. You download the zip, run npm install, then npm run dev, and a Vite dev server boots the whole admin instantly with hot reload. Drop in your own data layer and you have an admin panel, not a slideshow.

THE STACK

• React 18 + TypeScript (fully typed, reusable components)

• Vite (instant dev server + lean production build)

• Tailwind CSS (token-driven, utility-first styling)

• ApexCharts (gradient area charts + a radial goal gauge)

• react-router-dom (real multi-page routing)

• zustand (tiny, typed global state for theme + UI)

• lucide-react (crisp, consistent icon set)

WHAT'S INSIDE

• Collapsible sidebar — icon-rail on desktop, a slide-in drawer on mobile

• Sticky topbar with a global search field and a theme toggle

• KPI stat cards with inline sparklines and trend deltas

• Gradient area charts and a radial goal gauge powered by ApexCharts

• Data tables with colour-coded status badges

• An Ecommerce overview dashboard, a Products page, a Forms/settings page and more

• Light AND dark themes with a working, persisted toggle

• Realistic mock data so every screen looks alive out of the box

WHY IT'S DIFFERENT

• Typed, reusable components — StatCard, ChartCard, DataTable and friends are small, composable and documented, so extending the dashboard feels obvious.

• One-file re-skin — colours, radii and chart palette live in a single token file; change the accent and the whole dashboard, charts included, follows.

• Genuinely responsive (360 → 1440) — the layout, sidebar and tables all adapt instead of just shrinking.

• WCAG-minded — semantic markup, focus-visible states, keyboard-reachable navigation and AA-contrast text on both themes.

• Self-hosted Plus Jakarta Sans (woff2) — no Google CDN, no layout shift.

• Clean architecture — feature-organised folders, no mystery globals, nothing to untangle.

WHAT YOU GET

The full Vite source project · typed React + TypeScript components · Tailwind config + token theme file · ApexCharts chart components · zustand store · react-router routes · self-hosted fonts · realistic mock data · a README with setup + re-skin instructions.

REQUIREMENTS

Node.js (18+) and basic React knowledge to run and customise it (npm install · npm run dev).

Live demo: https://mcmxcixx.github.io/tivo/