Zephora UI

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.

npm install @zephora/react @zephora/theme
82+componente, Web + Native
48limbi gata făcute
100%testat cu axe-core, WAI-ARIA
~5KBgzip per componentă, impus în CI

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ă:

applyTheme()
#Status
1042Ada LovelacePaid$129.00
1041Grace HopperPending$89.00
1040Alan TuringPaid$249.00
1039Katherine J.Refunded$59.00
ZA
Zeynep Aksoy
Product designer
Email notifications
All systems operational
Deploy #482 finished in 2m 14s.

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.