Tivo — это премиальный шаблон админ-панели, ориентированный на production. Он помогает перестать воевать с boilerplate и начать выпускать те экраны, которые реально нужны вашему продукту. Это полноценная кодовая база React 18 + TypeScript — не HTML-макет — обёрнутая в глубокий, сфокусированный тёмный UI (и с полностью работающей светлой темой тоже), благодаря чему ваши метрики становятся самым ярким элементом на экране.

Это запускаемый исходный проект, а не статичная экспортированная версия. Вы скачиваете zip, выполняете npm install, затем npm run dev — и Vite-dev сервер мгновенно поднимает всю админку с hot reload. Подключите свой слой данных — и у вас будет админ-панель, а не слайд-шоу.

СТЕК

• React 18 + TypeScript (полностью типизированные, переиспользуемые компоненты)

• Vite (мгновенный dev server + лаконичная production-сборка)

• Tailwind CSS (стилизация на токенах, подход utility-first)

• ApexCharts (градиентные area-графики + радиальный индикатор цели)

• react-router-dom (настоящее многостраничное роутинг)

• zustand (небольшое, типизированное глобальное состояние для темы + UI)

• lucide-react (аккуратный и единообразный набор иконок)

ЧТО ВНУТРИ

• Складная боковая панель — на десктопе icon-rail, на мобильных устройствах — выезжающий drawer

• Липкая верхняя панель (topbar) с полем глобального поиска и переключателем темы

• Карточки KPI со встроенными спарклайнами и дельтами тренда

• Градиентные area-графики и радиальный индикатор цели, работающие на ApexCharts

• Таблицы данных с цветными бейджами статуса

• Дашборд по Ecommerce, страница Products, страница Forms/settings и многое другое

• Светлая И тёмная темы с работающим, сохраняемым переключателем

• Реалистичные mock данные, чтобы каждый экран выглядел живым «из коробки»

ЧЕМ ОНО ОТЛИЧАЕТСЯ

• Типизированные, переиспользуемые компоненты — StatCard, ChartCard, DataTable и их «друзья» небольшие, собранные из частей и документированы, поэтому расширять админ-панель интуитивно и очевидно.

• Re-skin в одном файле — цвета, радиусы и палитра графиков живут в одном файле токенов; измените акцент — и вся админка, включая графики, последует за ним.

• Реально адаптивно (360 → 1440) — макет, сайдбар и таблицы подстраиваются, а не просто «сжимаются».

• Подход с учётом WCAG — семантическая разметка, состояния focus-visible, навигация, доступная с клавиатуры, и текст с контрастом уровня AA на обеих темах.

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

• Чистая архитектура — папки организованы по фичам, нет «мистических» глобальных переменных, ничего не нужно распутывать.

ЧТО ВЫ ПОЛУЧАЕТЕ

Полный Vite исходный проект · типизированные React + TypeScript компоненты · Tailwind config + файл токен-темы · компоненты графиков ApexCharts · store zustand · react-router routes · self-hosted шрифты · реалистичные mock данные · README с инструкциями по настройке + re-skin.

ТРЕБОВАНИЯ

Node.js (18+) и базовые знания React, чтобы запустить и настроить под себя (npm install · npm run dev).

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