Tivo est un modèle de tableau de bord d’administration premium, pensé pour la production, qui vous permet d’arrêter de lutter contre le code répétitif et de commencer à livrer les écrans dont votre produit a réellement besoin. C’est une vraie base de code React 18 + TypeScript, et non une maquette HTML, enveloppée dans une interface sombre, profonde et sobre (avec aussi un thème clair complet) qui fait de vos métriques l’élément le plus lumineux de l’écran.

Il s’agit d’un projet source exécutable, pas d’un export statique. Vous téléchargez le zip, lancez npm install, puis npm run dev, et un serveur de développement Vite démarre instantanément tout le tableau de bord avec rechargement à chaud. Ajoutez votre propre couche de données et vous obtenez un vrai panneau d’administration, pas un diaporama.

LA STACK

• React 18 + TypeScript (composants réutilisables et entièrement typés)

• Vite (serveur de développement instantané + build de production léger)

• Tailwind CSS (style utility-first piloté par des tokens)

• ApexCharts (graphiques en aires avec dégradé + une jauge radiale d’objectif)

• react-router-dom (vrai routage multipage)

• zustand (état global minuscule et typé pour le thème et l’interface)

• lucide-react (jeu d’icônes net et cohérent)

CE QUE CONTIENT LE PACK

• Barre latérale repliable : rail d’icônes sur ordinateur, tiroir coulissant sur mobile

• Barre supérieure fixe avec un champ de recherche global et un bouton de changement de thème

• Cartes de statistiques KPI avec sparklines intégrés et indicateurs de tendance

• Graphiques en aires avec dégradé et jauge radiale d’objectif propulsés par ApexCharts

• Tableaux de données avec badges de statut codés par couleur

• Un tableau de bord de vue d’ensemble e-commerce, une page Produits, une page Formulaires/paramètres et plus encore

• Thèmes clair ET sombre avec un bouton de bascule fonctionnel et mémorisé

• Des données fictives réalistes pour que chaque écran paraisse vivant dès le départ

CE QUI LE REND DIFFÉRENT

• Composants typés et réutilisables : StatCard, ChartCard, DataTable et les autres sont petits, composables et documentés, si bien qu’étendre le tableau de bord devient évident.

• Refonte du style depuis un seul fichier : les couleurs, les rayons et la palette des graphiques se trouvent dans un unique fichier de tokens ; changez la couleur d’accent et tout le tableau de bord, graphiques compris, suit.

• Véritablement responsive (360 → 1440) : la mise en page, la barre latérale et les tableaux s’adaptent au lieu de simplement rétrécir.

• Pensé pour le WCAG : balisage sémantique, états de focus visibles, navigation accessible au clavier et texte au contraste AA sur les deux thèmes.

• Plus Jakarta Sans auto-hébergée (woff2) : pas de CDN Google, pas de décalage de mise en page.

• Architecture propre : dossiers organisés par fonctionnalité, aucune variable globale mystérieuse, rien à démêler.

CE QUE VOUS RECEVEZ

Le projet source Vite complet · composants React + TypeScript typés · configuration Tailwind + fichier de thème à tokens · composants de graphiques ApexCharts · store zustand · routes react-router · polices auto-hébergées · données fictives réalistes · un README avec les instructions d’installation et de refonte du style.

PRÉREQUIS

Node.js (18+) et des connaissances de base en React pour l’exécuter et le personnaliser (npm install · npm run dev).

Démo en ligne : https://mcmxcixx.github.io/tivo/