Tivo — шаблон React Admin Dashboard (React + TypeScript + Tailwind + ApexCharts)

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

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

СТЕК

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

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

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

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

• react-router-dom (реальная маршрутизация на несколько страниц)

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

• lucide-react (чёткий, единый набор иконок)

ЧТО ВНУТРИ

• Складная боковая панель — на desktop иконка-рейл, на mobile — слайд-ин drawer

• Липкий topbar с полем глобального поиска и переключателем темы

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

• Градиентные area-графики и радиальная шкала цели на базе ApexCharts

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

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

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

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

ПОЧЕМУ ЭТО ОТЛИЧАЕТСЯ

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

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

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

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

• Самохостинг Plus Jakarta Sans (woff2) — без Google CDN, без layout shift.

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

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

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

ТРЕБОВАНИЯ

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

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