Tivo es una plantilla de panel de administración premium y pensada para producción, que te permite dejar de pelear con el código repetitivo y empezar a entregar las pantallas que tu producto realmente necesita. Es una base de código real de React 18 + TypeScript, no una maqueta HTML, envuelta en una interfaz oscura, profunda y centrada (con un tema claro completo también) que hace que tus métricas sean lo más brillante de la pantalla.

Este es un proyecto de código fuente ejecutable, no una exportación estática. Descargas el zip, ejecutas npm install y luego npm run dev, y un servidor de desarrollo Vite arranca todo el panel al instante con recarga en caliente. Añade tu propia capa de datos y tendrás un panel de administración, no una presentación de diapositivas.

EL STACK

• React 18 + TypeScript (componentes reutilizables y totalmente tipados)

• Vite (servidor de desarrollo instantáneo + compilación de producción ligera)

• Tailwind CSS (estilos utility-first basados en tokens)

• ApexCharts (gráficos de área con degradado + un medidor radial de objetivos)

• react-router-dom (enrutamiento real de varias páginas)

• zustand (estado global diminuto y tipado para el tema y la interfaz)

• lucide-react (conjunto de iconos nítido y coherente)

QUÉ INCLUYE

• Barra lateral plegable: riel de iconos en escritorio y panel deslizante en móvil

• Barra superior fija con un campo de búsqueda global y un selector de tema

• Tarjetas de estadísticas KPI con sparklines integrados e indicadores de tendencia

• Gráficos de área con degradado y un medidor radial de objetivos con tecnología de ApexCharts

• Tablas de datos con insignias de estado codificadas por color

• Un panel de resumen de e-commerce, una página de productos, una página de formularios y ajustes, y más

• Temas claro Y oscuro con un selector funcional que se conserva

• Datos de prueba realistas para que cada pantalla se vea viva desde el primer momento

POR QUÉ ES DIFERENTE

• Componentes tipados y reutilizables: StatCard, ChartCard, DataTable y compañía son pequeños, componibles y están documentados, así que ampliar el panel resulta evidente.

• Rediseño desde un solo archivo: los colores, los radios y la paleta de los gráficos viven en un único archivo de tokens; cambia el color de acento y todo el panel, gráficos incluidos, lo sigue.

• Realmente adaptable (360 → 1440): el diseño, la barra lateral y las tablas se adaptan en lugar de limitarse a encogerse.

• Pensado para WCAG: marcado semántico, estados de foco visibles, navegación accesible con teclado y texto con contraste AA en ambos temas.

• Plus Jakarta Sans alojada por ti (woff2): sin CDN de Google y sin saltos de diseño.

• Arquitectura limpia: carpetas organizadas por funcionalidad, sin globales misteriosas y sin nada que desenredar.

QUÉ RECIBES

El proyecto fuente completo de Vite · componentes tipados de React + TypeScript · configuración de Tailwind + archivo de tema con tokens · componentes de gráficos ApexCharts · store de zustand · rutas de react-router · fuentes alojadas por ti · datos de prueba realistas · un README con instrucciones de instalación y de rediseño.

REQUISITOS

Node.js (18+) y conocimientos básicos de React para ejecutarlo y personalizarlo (npm install · npm run dev).

Demo en vivo: https://mcmxcixx.github.io/tivo/