Ehita kiiremini tervikliku React UI komplektiga
82+ ligipääsetavat, teemastatavat, tree-shakable komponenti veebi ja React Native'i jaoks — koos reaalajas teemade, 48 keele ja sisseehitatud headless Tailwind-režiimiga.
Muuda teemat reaalajas
Teemad kompileeritakse --z-* CSS-muutujateks — ühe vahetamine kujundab kõik selle lehe komponendid hetkega ümber, ilma re-render'i kuluta. Proovi:
| # | 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 |
Kõik, mida toodangu UI vajab
Üks sõltuvusteta tuum, kuus fokuseeritud paketti, põhialustes järeleandmisi ei tehta.
Null-runtime stiilid
CSS Modules + CSS custom properties. Ei mingit CSS-in-JS-i, ei mingit stiilide ümberarvutust renderdamisel.
Vaikimisi ligipääsetav
WAI-ARIA rollid, täielik klaviatuuritugi ja axe-core test igal komponendil.
48 keelt
Iga sisseehitatud tekst läbib locale-registri. Keeled laaditakse väljastpoolt bundle'it.
Headless + Tailwind
Lülita unstyled sisse globaalselt või komponendi kaupa ja too oma klassid token-preset'iga.
Tree-shakable
ESM-first, sideEffects-vaba JS. Enamik komponente jääb alla 5KB gzip — CI kontrollib.
Veeb + React Native
Sama komponendi API ja samad teemaobjektid käitavad nii @zephora/react'i kui ka @zephora/native'i.
Kirjuta vähem, tarni rohkem
Controlled või uncontrolled, otsast lõpuni tüübitud, kohe lokaliseeritud. Vasakul olev kood on paremal olev demo.
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>
);
}Hinda 4+ tärniga, et näha teadet ilmumas.
31 kopeeri-ja-kleebi plokki
Hero-sektsioonid, töölauad, sisselogimisvormid, tooteruudustikud — terviklikud sektsioonid Zephora komponentidest. Kopeeri kood, kleebi, valmis.