Bygg raskere med et komplett React-UI-kit
82+ tilgjengelige, tree-shakable komponenter med temastøtte for web og React Native — med live-temaer, 48 språk og innebygd headless Tailwind-modus.
Bytt tema live
Temaer kompileres til --z-* CSS-variabler — ett bytte gir hver komponent på denne siden ny stil umiddelbart, uten re-render-kostnad. 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 et produksjons-UI trenger
Én avhengighetsfri kjerne, seks fokuserte pakker, ingen kompromisser med det grunnleggende.
Zero-runtime-styling
CSS Modules + CSS custom properties. Ingen CSS-in-JS, ingen stilberegning ved rendering.
Tilgjengelig som standard
WAI-ARIA-roller, full tastaturstøtte og en axe-core-test på hver eneste komponent.
48 språk
Hver innebygde streng går gjennom locale-registeret. Språkpakker lastes utenfor bundelen.
Headless + Tailwind
Slå på unstyled globalt eller per komponent, og ta med egne klasser via token-preseten.
Tree-shakable
ESM-first JS uten sideEffects. De fleste komponentene holder seg under 5KB gzip — håndhevet i CI.
Web + React Native
Samme komponent-API og samme temaobjekter driver @zephora/react og @zephora/native.
Skriv mindre, lever mer
Controlled eller uncontrolled, typet hele veien, lokalisert rett ut av boksen. Koden til venstre er demoen til høyre.
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>
);
}Gi 4+ stjerner for å få varselet til å vises.
31 kopier-og-lim-blokker
Heroes, dashboards, innloggingsskjemaer, produktrutenett — hele seksjoner bygd av Zephora-komponenter. Kopier koden, lim inn, ferdig.