Каждый раз, когда в новом проекте доходит дело до внутренней панели управления или клиентского кабинета, разработчики наступают на одни и те же грабли. Кажется: «Да что там делать, набросаем пару таблиц, прикрутим график и форму входа за выходные». А в реальности ты закапываешься на три недели в верстку адаптивного сайдбара, настройку темной темы, бесконечные костыли вокруг выпадающих списков и попытки подружить пагинацию с мобильными экранами.
Чтобы сберечь нервы и время, я всегда держу под рукой качественные открытые заготовки. И в этом плане свежий мажорный релиз шаблона Shadcnstore Dashboard (известного в сообществе под кодовым именем Chronicle) заслуживает самого пристального внимания. Проект распространяется под свободной лицензией MIT, а его живую демонстрацию можно пощупать на демо-странице шаблона.
Прощай, Radix: почему авторы перешли на Base UI
Самое интересное в этом релизе скрыто «под капотом». Долгое время экосистема компонентов shadcn/ui жестко ассоциировалась с примитивами Radix UI. Решение было отличным, но с годами Radix накопил ворох проблем: избыточные DOM-обертки, заметные просадки производительности при открытии тяжелых модальных окон и сложности с глубокой кастомизацией фокуса клавиатуры.
В версии 2.0 команда шаблона совершила смелый шаг: полностью мигрировала базовые headless-компоненты на библиотеку Base UI (@base-ui/react), которую сейчас активно развивает команда Material UI. Выпадающие меню, всплывающие подсказки (тултипы), аккордеоны и диалоги теперь генерируют чистейший HTML без лишних вложенных div. Для доступности (a11y) это колоссальный шаг вперед: скринридеры больше не спотыкаются о километровые деревья элементов.
Чистый CSS без tailwind.config.js: магия Tailwind CSS v4
Второй тектонический сдвиг — перевод проекта на четвертую версию Tailwind CSS. Если ты хоть раз настраивал сложную темную тему в Tailwind v3, ты наверняка помнишь монструозный файл tailwind.config.js на пару сотен строк с десятками плагинов, регулярок и функций rgb(var(--...)).
В Tailwind v4 этот конфигурационный файл отправлен на свалку истории. Вся дизайн-система теперь описывается прямо в CSS через директиву @theme и нативные CSS Custom Properties:
@import "tailwindcss";
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
}
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--card: oklch(1 0 0);
--radius: 0.625rem;
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
}
Почувствуй разницу: цвета задаются в современном цветовом пространстве OKLCH, которое дает предсказуемую яркость и плавные градиенты при смене палитры. Никаких рантайм-вычислений JavaScript на клиенте — браузер обрабатывает переменные темы нативно на уровне своего движка рендеринга. Если тебе интересны трюки с оптимизацией утилитных классов, стоит вспомнить, как устроена легковесная библиотека cn, которая идеально ложится в эту архитектуру.
Практика: верстаем аналитический виджет и таблицу
Шаблон хорош тем, что не заставляет тебя изобретать структуру модулей. В репозитории доступны сразу две сборки: ультралегкий SPA на Vite с React Router и полноценное серверное приложение на Next.js 16 (с App Router). Пакет включает свыше 30 полностью сверстанных экранов: два варианта главного дашборда (Overview и Analytics), модули почты, канбан-доску задач, чат, календарь и управление пользователями.
Давай посмотрим, как компактно и элегантно выглядит компонент аналитической карточки с графиком:
import React from react;
import { Card, CardHeader, CardTitle, CardContent } from @/components/ui/card;
import { ArrowUpRight, Users } from lucide-react;
interface MetricWidgetProps {
title: string;
value: string;
change: string;
}
export function MetricWidget({ title, value, change }: MetricWidgetProps) {
return (
<Card className="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold tracking-tight">{value}</div>
<p className="mt-1 flex items-center text-xs text-emerald-500">
<ArrowUpRight className="mr-1 h-3.5 w-3.5" />
<span>{change} по сравнению с прошлым месяцем</span>
</p>
</CardContent>
</Card>
);
}
Для таблиц данных используется TanStack Table: столбцы можно перетаскивать, сортировать в один клик и фильтровать по сложным условиям. Графики построены на Recharts, при этом они уже адаптированы под палитру текущей темы интерфейса и не слепят белым фоном в ночном режиме.
Где таится подвох
При всех достоинствах готового решения важно помнить о цене выбора. Поскольку шаблон перешел на Tailwind CSS v4, любые старые плагины Tailwind из экосистемы v3 (например, специфичные кастомные анимации или старые библиотеки компонентов) потребуют адаптации. Кроме того, Base UI находится в фазе активного развития: хотя базовые элементы работают стабильно, документация по некоторым редким сценариям взаимодействия все еще дописывается сообществом.
Тем не менее, если тебе нужно запустить стильный, доступный и быстрый SaaS-интерфейс без мучительной верстки с нуля — Shadcnstore Dashboard экономит десятки часов продуктовой разработки.