Gradite brže uz kompletan React UI kit
82+ pristupačnih, temabilnih, tree-shakable komponenti za Web i React Native — sa živim temama, 48 jezika i ugrađenim headless Tailwind režimom.
Menjajte temu uživo
Teme se kompajliraju u --z-* CSS promenljive — promena jedne trenutno restilizuje svaku komponentu na ovoj stranici, bez ikakvog troška re-rendera. Probajte:
| # | 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 |
Sve što je produkcijskom UI-ju potrebno
Jedno jezgro bez zavisnosti, šest fokusiranih paketa, bez kompromisa u osnovama.
Stilizovanje bez runtime-a
CSS Modules + CSS custom properties. Bez CSS-in-JS-a, bez preračunavanja stilova pri renderu.
Pristupačno podrazumevano
WAI-ARIA uloge, puna podrška za tastaturu i axe-core test na svakoj komponenti.
48 jezika
Svaki ugrađeni tekst prolazi kroz registar lokalizacija. Jezici se učitavaju izvan bundle-a.
Headless + Tailwind
Uključite unstyled globalno ili po komponenti i donesite sopstvene klase kroz token preset.
Tree-shakable
ESM-first JS bez sideEffects. Većina komponenti ostaje ispod 5KB gzip — provera u CI-ju.
Web + React Native
Isti API komponenti i isti objekti tema pokreću @zephora/react i @zephora/native.
Pišite manje, isporučujte više
Controlled ili uncontrolled, tipizirano od početka do kraja, lokalizovano odmah iz kutije. Kod levo je demo desno.
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>
);
}Ocenite sa 4+ zvezdice da bi se pojavio alert.
31 copy-paste blokova
Hero sekcije, dashboardi, forme za prijavu, mreže proizvoda — kompletne sekcije od Zephora komponenti. Kopirajte kod, nalepite, gotovo.