Розробляйте швидше з повним 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. Скопіюйте код, вставте — готово.