Zephora UI

Sviluppa più velocemente con un kit UI React completo

82+ componenti accessibili, tematizzabili e tree-shakable per Web e React Native — con theming live, 48 lingue e modalità Tailwind headless integrata.

npm install @zephora/react @zephora/theme
82+componenti, Web + Native
48lingue pronte all'uso
100%testato con axe-core, WAI-ARIA
~5KBgzip per componente, verificato in CI

Cambia tema dal vivo

I temi compilano in variabili CSS --z-* — cambiarne uno ridisegna all'istante ogni componente di questa pagina, senza alcun costo di re-render. Provalo:

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.

Tutto ciò che serve a una UI di produzione

Un core senza dipendenze, sei pacchetti mirati, nessun compromesso sui fondamentali.

Stili zero-runtime

CSS Modules + custom properties CSS. Niente CSS-in-JS, nessun ricalcolo degli stili al render.

Accessibile di default

Ruoli WAI-ARIA, pieno supporto della tastiera e un test axe-core su ogni singolo componente.

48 lingue

Ogni stringa integrata passa dal registro delle locale. Le locale si caricano fuori dal bundle.

Headless + Tailwind

Attiva unstyled a livello globale o per componente e porta le tue classi con il preset dei token.

Tree-shakable

JS ESM-first, senza sideEffects. La maggior parte dei componenti resta sotto i 5KB gzip — imposto in CI.

Web + React Native

La stessa API dei componenti e gli stessi oggetti tema guidano @zephora/react e @zephora/native.

Scrivi meno, rilascia di più

Controlled o uncontrolled, tipizzato end-to-end, localizzato out of the box. Il codice a sinistra è la demo a destra.

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>
  );
}

Assegna 4+ stelle per far comparire l'alert.

31 blocchi copia e incolla

Hero, dashboard, form di accesso, griglie prodotto — sezioni complete costruite con i componenti Zephora. Copia il codice, incolla, fatto.