Разработвайте по-бързо с цялостен React UI кит
82+ достъпни, темизируеми, tree-shakable компонента за Web и React Native — с живи теми, 48 езика и вграден headless Tailwind режим.
Сменете темата на живо
Темите се компилират до --z-* CSS променливи — превключването на една моментално престилизира всеки компонент на тази страница, с нулев разход за re-render. Опитайте:
| # | 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 |
Всичко, от което се нуждае продукционен UI
Едно ядро без зависимости, шест фокусирани пакета, никакви компромиси с основите.
Стилизиране без runtime
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. Копирайте кода, поставете, готово.