Construiește mai rapid cu un kit UI React complet
82+ componente accesibile, tematizabile și tree-shakable pentru Web și React Native — cu teme live, 48 de limbi și mod headless Tailwind încorporat.
Schimbă tema live
Temele se compilează în variabile CSS --z-* — schimbarea uneia restilizează instantaneu fiecare componentă de pe această pagină, fără niciun cost de re-render. Încearcă:
| # | 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 |
Tot ce are nevoie un UI de producție
Un singur nucleu fără dependențe, șase pachete focalizate, fără compromisuri la fundamente.
Stilizare fără runtime
CSS Modules + CSS custom properties. Fără CSS-in-JS, fără recalcularea stilurilor la render.
Accesibil implicit
Roluri WAI-ARIA, suport complet pentru tastatură și un test axe-core pe fiecare componentă.
48 de limbi
Fiecare text încorporat trece prin registrul de locale. Limbile se încarcă din afara bundle-ului.
Headless + Tailwind
Activează unstyled global sau per componentă și adu-ți propriile clase prin token preset.
Tree-shakable
JS ESM-first, fără sideEffects. Majoritatea componentelor rămân sub 5KB gzip — impus în CI.
Web + React Native
Același API de componente și aceleași obiecte de temă alimentează @zephora/react și @zephora/native.
Scrie mai puțin, livrează mai mult
Controlled sau uncontrolled, tipizat de la un capăt la altul, localizat din start. Codul din stânga este demo-ul din dreapta.
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>
);
}Acordă 4+ stele ca să vezi alerta.
31 blocuri copy-paste
Secțiuni hero, dashboard-uri, formulare de autentificare, grile de produse — secțiuni complete construite din componente Zephora. Copiază codul, lipește-l, gata.