Byggðu hraðar með fullbúnu React UI-setti
82+ aðgengilegar, þemanlegar, tree-shakable einingar fyrir vef og React Native — með lifandi þemum, 48 tungumálum og innbyggðum headless Tailwind-ham.
Breyttu þemanu í rauntíma
Þemu þýðast í --z-* CSS-breytur — að skipta um eitt endurstílar samstundis hverja einingu á þessari síðu, án re-render-kostnaðar. Prófaðu:
| # | 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 sem framleiðslu-UI þarf
Einn kjarni án ytri pakka, sex markvissir pakkar, engar málamiðlanir um grunnatriðin.
Stílar án keyrslutíma
CSS Modules + CSS custom properties. Ekkert CSS-in-JS, engir stílútreikningar við birtingu.
Aðgengilegt sjálfgefið
WAI-ARIA-hlutverk, fullur lyklaborðsstuðningur og axe-core-próf á hverri einustu einingu.
48 tungumál
Allir innbyggðir textar fara í gegnum locale-skrána. Tungumál hlaðast utan búntsins.
Headless + Tailwind
Kveiktu á unstyled fyrir heildina eða staka einingu og komdu með eigin klasa með token-forstillingunni.
Tree-shakable
ESM-fyrst, sideEffects-laust JS. Flestar einingar haldast undir 5KB gzip — framfylgt í CI.
Vefur + React Native
Sama einingar-API og sömu þemuhlutir knýja @zephora/react og @zephora/native.
Skrifaðu minna, skilaðu meira
Controlled eða uncontrolled, týpað enda á milli, staðfært beint úr kassanum. Kóðinn til vinstri er sýnidæmið til hægri.
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>
);
}Gefðu 4+ stjörnur til að láta viðvörunina birtast.
31 afrita-og-líma blokkir
Hero-hlutar, mælaborð, innskráningarform, vörunet — heilir hlutar byggðir úr Zephora-einingum. Afritaðu kóðann, límdu, búið.