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

> Собирайте экраны на React 19 из карточек, полей и диалогов tenvell. Пример дашборда, графики Recharts и точные границы переносимого API.

Соберите дашборд или экран настроек из тех же элементов tenvell, что работают в каталоге: карточек метрик, полей, переключателей, вкладок, меню и диалогов. Тонкое стекло и локальная типографика связывают их в один визуальный язык.

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

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

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

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

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

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

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

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

## Подойдёт, если

- Вы собираете дашборд продукта, настройки или внутренний инструмент на React 19.
- Карточки, элементы управления и всплывающие слои должны использовать спокойный стеклянный материал.
- Раскладка, данные и исходники должны оставаться под вашим контролем.

## Границы переносимого API

- Calendar, DataTable и toast из витрины не являются экспортами ядра.
- Полные дашборд, мессенджер и доска задач доступны как исходники демонстраций.
- Recharts подключается отдельно по необходимости; ядро работает и без него.

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

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

```jsx
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>
  );
}
```

## Частые вопросы

### Это готовый фреймворк для админки?

Tenvell — UI kit. Маршрутизацию, авторизацию, хранение данных и бизнес-процессы задаёт приложение.

### Можно ли начать с работающего приложения?

Да. Архив стартового проекта содержит пакет, lockfile и редактируемый экран. В инструкции описаны запуск npm ci и npm run dev.

## Открыть справочник

- [Открыть живой дашборд](https://tenvell.space/examples/dashboard)
- [Примеры формы и графика](https://tenvell.space/docs/recipes.md)
- [Исходники полных экранов](https://github.com/raven-ai-esh/tenvell/tree/main/src/examples)

- [llms.txt](https://tenvell.space/llms.txt)

- [Установить tenvell](https://tenvell.space/install)

HTML: https://tenvell.space/ru/react-dashboard-ui-kit