# Стеклянный дизайн-кит для React.

> Тонкое стекло для интерфейсов на React 19: карточки, формы и диалоги, четыре поверхности, изолированные стили, локальные шрифты и исходники MIT.

Tenvell объединяет glassmorphism в набор React-компонентов: тонкие кромки, прозрачные поверхности, читаемые элементы управления и спокойный отклик на наведение и нажатие. Один материал используется в карточках, полях, меню и диалогах.

## Один материал для всего интерфейса

Выберите поверхность air, frost, prism или smoke и светлую либо тёмную тему. TenvellProvider сохраняет настройки в своей области, включая диалоги и меню в порталах. Несколько провайдеров могут находиться на одной странице.

Lamina UI и Lamina Mono поставляются локально. Компоненты используют обычный CSS с границами области: их можно подключить к своему приложению, сохранив остальную систему оформления.

## Начните с рабочего элемента

Ниже — тот же пример кнопки, который устанавливается из registry. В нём есть провайдер, стили, счётчик нажатий и собственная смена темы. Точные свойства и экспорты опубликованного пакета перечислены в справочнике API.

## Подберите поверхность под содержимое

Начните со сдержанной поверхности и проверьте читаемость текста и границ элементов на реальном фоне экрана. Фон и раскладка приложения остаются за пределами провайдера. Tenvell задаёт материал элементов, а приложение — их содержимое и поведение.

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

- Приложение использует React и React DOM 19.
- Для форм, карточек и элементов продукта нужен визуальный язык тонкого стекла.
- Важны редактируемые исходники или ESM-пакет, стили в своей области и локальные шрифты.

## Что проверить при выборе

- CSS требует поддержки современных @scope и backdrop-filter.
- В набор не входят оптическая симуляция линз и нативный мобильный рендерер.
- Проверьте контраст, работу с клавиатурой и вспомогательными технологиями в своём сценарии.

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

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

```jsx
import { TenvellProvider, Card, Button } from 'tenvell';
import 'tenvell/styles.css';

export default function GlassCard() {
  return (
    <TenvellProvider theme="light" surface="frost">
      <Card><p>Your interface, one material.</p><Button>Continue</Button></Card>
    </TenvellProvider>
  );
}
```

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

### Нужен ли Tailwind?

Нет. Компоненты используют обычный CSS. Shadcn CLI служит способом распространения редактируемых исходников.

### Можно ли использовать разные темы на одном экране?

Да. У каждого TenvellProvider свои theme, surface, accent, radius, density и motion.

### Какая у набора лицензия?

Собственный код распространяется по MIT, оригинальные шрифты Lamina — по SIL OFL 1.1. При распространении копий сохраняйте уведомления о лицензиях.

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

- [Посмотреть карточки и поверхности](https://tenvell.space/#cards)
- [Открыть API пакета](https://tenvell.space/docs/api.md)
- [Посмотреть шрифты Lamina](https://tenvell.space/typeface.html)

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

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

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