Разрабатывайте быстрее с полным React UI-китом
82+ доступных, темизируемых, tree-shakable компонентов для Web и React Native — с живыми темами, 48 локалями и встроенным headless-режимом Tailwind.
Меняйте тему вживую
Темы компилируются в CSS-переменные --z-* — переключение одной мгновенно перекрашивает каждый компонент на этой странице без затрат на ре-рендер. Попробуйте:
| # | Status | ||
|---|---|---|---|
| 1042 | Ada Lovelace | Paid | $129.00 |
| 1041 | Grace Hopper | Pending | $89.00 |
| 1040 | Alan Turing | Paid | $249.00 |
| 1039 | Katherine J. | Refunded | $59.00 |
Всё, что нужно продакшен-интерфейсу
Одно ядро без зависимостей, шесть сфокусированных пакетов, никаких компромиссов в основах.
Стили без рантайма
CSS Modules + CSS custom properties. Без CSS-in-JS, без пересчёта стилей при рендере.
Доступность по умолчанию
Роли WAI-ARIA, полная поддержка клавиатуры и тест axe-core у каждого компонента.
48 языков
Все встроенные строки проходят через реестр локалей. Локали загружаются вне бандла.
Headless + Tailwind
Включайте unstyled глобально или для отдельного компонента и подключайте свои классы через token preset.
Tree-shakable
ESM-first JS без sideEffects. Большинство компонентов — меньше 5KB gzip, это контролируется в CI.
Web + React Native
Один и тот же API компонентов и одни и те же объекты тем работают в @zephora/react и @zephora/native.
Пишите меньше, выпускайте больше
Controlled или uncontrolled, типизировано от и до, локализовано из коробки. Код слева — это демо справа.
import { Card, CardBody, Rating, Alert } from "@zephora/react";
function Review() {
const [stars, setStars] = React.useState(3);
return (
<Card>
<CardBody>
<Rating value={stars} onValueChange={setStars} />
{stars >= 4 && (
<Alert status="success" title="Thanks!">
We're glad you liked it.
</Alert>
)}
</CardBody>
</Card>
);
}Поставьте 4+ звезды, чтобы появился алерт.
31 copy-paste блоков
Hero-блоки, дашборды, формы входа, сетки товаров — целые секции из компонентов Zephora. Скопируйте код, вставьте — готово.