Építs gyorsabban egy teljes React UI kittel
82+ akadálymentes, témázható, tree-shakable komponens Webre és React Native-re — élő témázással, 48 nyelvvel és beépített headless Tailwind móddal.
Témázd élőben
A témák --z-* CSS-változókra fordulnak — egy váltás azonnal átstílusozza az oldal minden komponensét, nulla re-render költséggel. Próbáld ki:
| # | 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 |
Minden, ami egy éles UI-hoz kell
Egy függőségmentes mag, hat fókuszált csomag, semmi kompromisszum az alapokban.
Zéró-runtime stílusozás
CSS Modules + CSS custom property-k. Nincs CSS-in-JS, nincs stílusújraszámítás rendereléskor.
Alapból akadálymentes
WAI-ARIA szerepek, teljes billentyűzettámogatás és axe-core teszt minden egyes komponensen.
48 nyelv
Minden beépített szöveg a locale-regisztráción folyik át. A nyelvek a bundle-ön kívülről töltődnek.
Headless + Tailwind
Kapcsold az unstyled módot globálisan vagy komponensenként, és hozd a saját osztályaidat a token presettel.
Tree-shakable
ESM-first, sideEffects-mentes JS. A legtöbb komponens 5KB gzip alatt marad — a CI kényszeríti ki.
Web + React Native
Ugyanaz a komponens-API és ugyanazok a témaobjektumok hajtják a @zephora/react-et és a @zephora/native-et.
Írj kevesebbet, szállíts többet
Controlled vagy uncontrolled, végig típusos, alapból lokalizált. A bal oldali kód a jobb oldali demó.
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>
);
}Adj 4+ csillagot, hogy megjelenjen az alert.
31 másolható-beilleszthető blokk
Hero szekciók, dashboardok, bejelentkezési űrlapok, termékrácsok — teljes szekciók Zephora-komponensekből. Másold a kódot, illeszd be, kész.