Bygg snabbare med ett komplett React-UI-kit
82+ tillgängliga, tree-shakable komponenter med temastöd för webb och React Native — med live-teman, 48 språk och ett inbyggt headless Tailwind-läge.
Byt tema live
Teman kompileras till --z-* CSS-variabler — ett byte stilar om varje komponent på den här sidan direkt, utan re-render-kostnad. Prova:
| # | 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 |
Allt ett produktions-UI behöver
En beroendefri kärna, sex fokuserade paket, inga kompromisser med grunderna.
Zero-runtime-styling
CSS Modules + CSS custom properties. Ingen CSS-in-JS, ingen stilomräkning vid rendering.
Tillgänglig som standard
WAI-ARIA-roller, fullt tangentbordsstöd och ett axe-core-test på varenda komponent.
48 språk
Varje inbyggd sträng går via locale-registret. Språkpaket laddas utanför bundlen.
Headless + Tailwind
Slå på unstyled globalt eller per komponent och ta med egna klasser via token-preseten.
Tree-shakable
ESM-first JS utan sideEffects. De flesta komponenter håller sig under 5KB gzip — säkras i CI.
Webb + React Native
Samma komponent-API och samma temaobjekt driver @zephora/react och @zephora/native.
Skriv mindre, leverera mer
Controlled eller uncontrolled, typad hela vägen, lokaliserad direkt ur lådan. Koden till vänster är demon till höger.
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>
);
}Ge 4+ stjärnor för att visa alerten.
31 copy-paste-block
Heroes, dashboards, inloggningsformulär, produktrutnät — hela sektioner byggda av Zephora-komponenter. Kopiera koden, klistra in, klart.