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

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

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

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

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

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

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

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

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

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

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