Gradite hitreje s popolnim React UI kompletom
82+ dostopnih, temabilnih, tree-shakable komponent za splet in React Native — z živimi temami, 48 jeziki in vgrajenim headless načinom Tailwind.
Spreminjajte temo v živo
Teme se prevedejo v CSS spremenljivke --z-* — preklop ene v hipu preoblikuje vsako komponento na tej strani, brez stroškov ponovnega renderja. Poskusite:
| # | 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 |
Vse, kar produkcijski UI potrebuje
Eno jedro brez odvisnosti, šest osredotočenih paketov, nič kompromisov pri osnovah.
Oblikovanje brez runtime-a
CSS Modules + CSS custom properties. Brez CSS-in-JS, brez ponovnega izračuna slogov ob renderju.
Privzeto dostopno
Vloge WAI-ARIA, popolna podpora tipkovnici in axe-core test na prav vsaki komponenti.
48 jezikov
Vsako vgrajeno besedilo teče skozi register lokalizacij. Jeziki se nalagajo zunaj bundla.
Headless + Tailwind
Vklopite unstyled globalno ali po komponenti in prinesite svoje razrede prek token preseta.
Tree-shakable
ESM-first JS brez sideEffects. Večina komponent ostane pod 5KB gzip — vsiljeno v CI.
Web + React Native
Isti API komponent in isti objekti tem poganjajo @zephora/react in @zephora/native.
Pišite manj, dostavite več
Controlled ali uncontrolled, tipizirano od začetka do konca, lokalizirano takoj iz škatle. Koda na levi je demo na desni.
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>
);
}Ocenite s 4+ zvezdicami, da se prikaže opozorilo.
31 copy-paste blokov
Hero sekcije, nadzorne plošče, prijavni obrazci, mreže izdelkov — celotne sekcije iz komponent Zephora. Kopirajte kodo, prilepite, končano.