Дашборды и настройки на React.

Соберите экран из документированных элементов

Семейство Card подходит для метрик и групп настроек, Input и Select — для фильтров, Tabs — для локальной навигации, Dialog — для подробностей. Раскладка продукта и модель данных остаются в вашем приложении.

Полный пример дашборда показывает составной экран с вымышленными данными. Его исходники опубликованы в GitHub. Переносимое ядро — это перечисленные в API компоненты; готовый дашборд не является отдельным экспортом пакета.

Добавьте графики по задаче экрана

Формы GlassBar, GlassDot и GlassSector работают с Recharts 3. У адаптивного графика должна быть ненулевая высота, а Tooltip cursor={false} сохраняет подсветку на самом элементе графика.

В стартовом проекте уже есть график, локальные заметки и чек-лист. Это запускаемое приложение с фиксированными зависимостями и опубликованным архивом tenvell.

Задайте поведение продукта явно

UI kit предоставляет элементы и оформление. Подключите фильтры, сохранение, загрузку и доступ к данным в соответствии с задачами приложения. Демонстрации хранят изменения локально и не предоставляют боевой API или базу данных.

Начните в своём проекте

npm install https://tenvell.space/releases/0.2.1/tenvell-0.2.1.tgz

import { TenvellProvider, Card, CardHeader, CardTitle, CardContent } from 'tenvell';
import 'tenvell/styles.css';

export default function DashboardCard() {
  return (
    <TenvellProvider theme="light" surface="air">
      <Card>
        <CardHeader><CardTitle>Active projects</CardTitle></CardHeader>
        <CardContent><p>12</p><small>Local example data</small></CardContent>
      </Card>
    </TenvellProvider>
  );
}