Byg hurtigere med et komplet React-UI-kit
82+ tilgængelige, tree-shakable komponenter med temaunderstøttelse til web og React Native — med live-temaer, 48 sprog og indbygget headless Tailwind-tilstand.
Skift tema live
Temaer kompileres til --z-* CSS-variabler — ét skift restyler øjeblikkeligt alle komponenter på denne side, uden re-render-omkostninger. Prøv selv:
| # | 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 |
Alt hvad et produktions-UI har brug for
Én afhængighedsfri kerne, seks fokuserede pakker, ingen kompromiser med det grundlæggende.
Zero-runtime-styling
CSS Modules + CSS custom properties. Ingen CSS-in-JS, ingen stilberegning ved rendering.
Tilgængelig som standard
WAI-ARIA-roller, fuld tastaturunderstøttelse og en axe-core-test på hver eneste komponent.
48 sprog
Alle indbyggede tekster går gennem locale-registret. Sprogpakker indlæses uden for bundlet.
Headless + Tailwind
Slå unstyled til globalt eller pr. komponent, og medbring dine egne klasser via token-presettet.
Tree-shakable
ESM-first JS uden sideEffects. De fleste komponenter holder sig under 5KB gzip — håndhævet i CI.
Web + React Native
Samme komponent-API og samme temaobjekter driver @zephora/react og @zephora/native.
Skriv mindre, lever mere
Controlled eller uncontrolled, typet hele vejen, lokaliseret fra start. Koden til venstre er demoen til højre.
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>
);
}Giv 4+ stjerner for at få alerten frem.
31 copy-paste-blokke
Heroes, dashboards, loginformularer, produktgitre — hele sektioner bygget af Zephora-komponenter. Kopiér koden, indsæt, færdig.