Stavajte rýchlejšie s kompletným React UI kitom
82+ prístupných, tematizovateľných, tree-shakable komponentov pre Web a React Native — so živými motívmi, 48 jazykmi a vstavaným headless Tailwind režimom.
Zmeňte motív naživo
Motívy sa kompilujú do CSS premenných --z-* — prepnutie jedného okamžite preštýluje každý komponent na tejto stránke, bez nákladov na re-render. Vyskúšajte:
| # | 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šetko, čo produkčné UI potrebuje
Jedno jadro bez závislostí, šesť zameraných balíkov, žiadne kompromisy v základoch.
Štýlovanie bez runtime
CSS Modules + CSS custom properties. Žiadny CSS-in-JS, žiadne prepočítavanie štýlov pri renderi.
Prístupné v predvolenom stave
Roly WAI-ARIA, plná podpora klávesnice a axe-core test pri každom jednom komponente.
48 jazykov
Každý vstavaný text prechádza registrom locale. Jazyky sa načítavajú mimo bundle.
Headless + Tailwind
Zapnite unstyled globálne alebo po komponentoch a prineste si vlastné triedy cez token preset.
Tree-shakable
ESM-first JS bez sideEffects. Väčšina komponentov zostáva pod 5KB gzip — vynucované v CI.
Web + React Native
Rovnaké API komponentov a rovnaké objekty motívov poháňajú @zephora/react aj @zephora/native.
Píšte menej, dodávajte viac
Controlled aj uncontrolled, typované od začiatku do konca, lokalizované hneď po vybalení. Kód vľavo 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+ hviezdičkami a uvidíte alert.
31 copy-paste blokov
Hero sekcie, dashboardy, prihlasovacie formuláre, mriežky produktov — celé sekcie postavené z komponentov Zephora. Skopírujte kód, vložte, hotovo.