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

Tivo ist ein Premium-Admin-Dashboard-Template mit Fokus auf Produktionseinsatz. Es hilft dir, dich nicht länger mit Boilerplate herumzuschlagen, sondern direkt die Screens zu liefern, die dein Produkt wirklich braucht. Es ist ein echtes React 18 + TypeScript Codebase — kein HTML-Mockup — verpackt in eine tief fokussierte Dark-UI (mit komplettem Light-Theme ebenfalls), die deine Kennzahlen zum hellsten Element auf dem Bildschirm macht.

Das ist ein lauffähiges Source-Projekt, kein statischer Export. Du lädst das Zip herunter, führst npm install aus, dann npm run dev, und ein Vite-Dev-Server startet das gesamte Admin sofort mit Hot Reload. Ergänze deine eigene Datenebene und du bekommst ein Admin-Panel — keine Slideshow.

THE STACK

• React 18 + TypeScript (voll typisiert, wiederverwendbare Komponenten)

• Vite (Instant Dev Server + schlanker Production-Build)

• Tailwind CSS (tokenbasiert, utility-first Styling)

• ApexCharts (Gradient Area Charts + ein radialer Ziel-Gauge)

• react-router-dom (echtes Multi-Page Routing)

• zustand (kleiner, typisierter globaler State für Theme + UI)

• lucide-react (präzises, konsistentes Icon-Set)

WAS ENTHALTEN IST

• Einklappbare Sidebar — Icon-Rail auf Desktop, Slide-in-Drawer auf Mobile

• Sticky Topbar mit globalem Suchfeld und Theme-Toggle

• KPI-Stat-Karten mit Inline-Sparklines und Trend-Deltas

• Gradient Area Charts und ein radialer Ziel-Gauge, angetrieben von ApexCharts

• Datentabellen mit farbcodierten Status-Badges

• Ein Ecommerce-Übersichts-Dashboard, eine Products-Seite, eine Forms-/Settings-Seite und mehr

• Light UND dark themes mit einem funktionierenden, persistierten Toggle

• Realistische Mock-Daten, damit jede Seite ab Werk lebendig wirkt

WARUM ES ANDERS IST

• Typisierte, wiederverwendbare Komponenten — StatCard, ChartCard, DataTable und Freunde sind klein, gut kombinierbar und dokumentiert, sodass das Erweitern des Dashboards naheliegend wirkt.

• One-File Re-Skin — Farben, Radien und Chart-Palette leben in einer einzigen Token-Datei; ändert man den Accent, folgt das gesamte Dashboard, inklusive Charts.

• Wirklich responsiv (360 → 1440) — das Layout, die Sidebar und die Tabellen passen sich an, statt nur kleiner zu werden.

• WCAG-fokussiert — semantisches Markup, fokusierbare states, per Keyboard erreichbare Navigation und AA-kontrastreiche Texte in beiden Themes.

• Self-hosted Plus Jakarta Sans (woff2) — kein Google CDN, kein Layout Shift.

• Saubere Architektur — feature-ordnende Ordner, keine mysteriösen Globals, nichts zum Entwirren.

WAS DU BEKOMMST

Das komplette Vite-Source-Projekt · typisierte React + TypeScript-Komponenten · Tailwind config + token theme file · ApexCharts-Chart-Komponenten · zustand store · react-router Routen · self-hosted Fonts · realistische Mock-Daten · eine README mit Setup- + Re-Skin-Anleitung.

ANFORDERUNGEN

Node.js (18+) und grundlegende React-Kenntnisse, um es auszuführen und anzupassen (npm install · npm run dev).

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