Stavějte rychleji s kompletním React UI kitem
82+ přístupných, tematizovatelných, tree-shakable komponent pro Web a React Native — s živými motivy, 48 jazyky a vestavěným headless Tailwind režimem.
Změňte motiv naživo
Motivy se kompilují do CSS proměnných --z-* — přepnutí jednoho okamžitě přestyluje každou komponentu na této stránce, bez nákladů na re-render. Vyzkoušejte:
| # | 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 |
Vše, co produkční UI potřebuje
Jedno jádro bez závislostí, šest zaměřených balíčků, žádné kompromisy v základech.
Stylování bez runtime
CSS Modules + CSS custom properties. Žádný CSS-in-JS, žádný přepočet stylů při renderu.
Přístupné ve výchozím stavu
Role WAI-ARIA, plná podpora klávesnice a axe-core test u každé jednotlivé komponenty.
48 jazyků
Každý vestavěný text prochází registrem locale. Jazyky se načítají mimo bundle.
Headless + Tailwind
Zapněte unstyled globálně nebo po komponentách a přineste si vlastní třídy přes token preset.
Tree-shakable
ESM-first JS bez sideEffects. Většina komponent zůstává pod 5KB gzip — vynucováno v CI.
Web + React Native
Stejné API komponent a stejné objekty motivů pohánějí @zephora/react i @zephora/native.
Pište méně, dodávejte více
Controlled i uncontrolled, typované od začátku do konce, lokalizované rovnou z krabice. Kód vlevo je demo vpravo.
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>
);
}Ohodnoťte 4+ hvězdičkami a uvidíte alert.
31 copy-paste bloků
Hero sekce, dashboardy, přihlašovací formuláře, mřížky produktů — celé sekce postavené z komponent Zephora. Zkopírujte kód, vložte, hotovo.