Tivo - це преміальний шаблон адмінпанелі, створений із думкою про продакшн, який дає змогу перестати боротися з шаблонним кодом і почати випускати екрани, що справді потрібні вашому продукту. Це справжня кодова база на React 18 + TypeScript, а не HTML-макет, загорнута в глибокий, зосереджений темний інтерфейс (із повноцінною світлою темою теж), у якому ваші метрики - найяскравіше, що є на екрані.

Це робочий проєкт із вихідним кодом, а не статичний експорт. Ви завантажуєте zip, виконуєте npm install, потім npm run dev, і dev-сервер Vite миттєво запускає всю адмінпанель із гарячим перезавантаженням. Підключіть власний шар даних, і ви матимете адмінпанель, а не слайдшоу.

СТЕК

• React 18 + TypeScript (повністю типізовані багаторазові компоненти)

• Vite (миттєвий dev-сервер + легка продакшн-збірка)

• Tailwind CSS (стилізація utility-first на основі токенів)

• ApexCharts (градієнтні графіки з областями + радіальний індикатор цілі)

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

• zustand (крихітний типізований глобальний стан для теми та інтерфейсу)

• lucide-react (чіткий і послідовний набір іконок)

ЩО ВСЕРЕДИНІ

• Бічна панель, що згортається: смуга іконок на десктопі, висувна шухляда на мобільних

• Закріплена верхня панель із глобальним полем пошуку та перемикачем теми

• KPI-картки статистики з вбудованими sparklines та індикаторами тренду

• Градієнтні графіки з областями та радіальний індикатор цілі на основі ApexCharts

• Таблиці даних зі статусними бейджами, позначеними кольором

• Оглядова панель e-commerce, сторінка товарів, сторінка форм і налаштувань тощо

• Світла ТА темна теми з робочим перемикачем, що запам’ятовується

• Реалістичні тестові дані, щоб кожен екран виглядав живим одразу після встановлення

ЧИМ ВОНО ВІДРІЗНЯЄТЬСЯ

• Типізовані багаторазові компоненти: StatCard, ChartCard, DataTable та інші невеликі, компоновані й задокументовані, тож розширювати панель очевидно та легко.

• Зміна стилю з одного файлу: кольори, радіуси й палітра графіків живуть в одному файлі токенів; змініть акцентний колір, і вся панель, разом із графіками, піде за ним.

• Справді адаптивний (360 → 1440): макет, бічна панель і таблиці підлаштовуються, а не просто зменшуються.

• З увагою до WCAG: семантична розмітка, видимі стани фокуса, навігація з клавіатури та текст із контрастом AA в обох темах.

• Власний хостинг Plus Jakarta Sans (woff2): без Google CDN, без зсуву макета.

• Чиста архітектура: папки за функціональністю, жодних загадкових глобальних змінних, нічого розплутувати.

ЩО ВИ ОТРИМАЄТЕ

Повний вихідний проєкт Vite · типізовані компоненти React + TypeScript · конфігурація Tailwind + файл теми з токенами · компоненти графіків ApexCharts · сховище zustand · маршрути react-router · шрифти з власним хостингом · реалістичні тестові дані · README з інструкціями зі встановлення та зміни стилю.

ВИМОГИ

Node.js (18+) і базові знання React для запуску та налаштування (npm install · npm run dev).

Жива демонстрація: https://mcmxcixx.github.io/tivo/