Zephora UI

Construeix més ràpid amb un kit d'UI de React complet

82+ components accessibles, tematitzables i tree-shakable per a Web i React Native — amb temes en viu, 48 idiomes i un mode Tailwind headless integrat.

npm install @zephora/react @zephora/theme
82+components, Web + Native
48idiomes a punt
100%provat amb axe-core, WAI-ARIA
~5KBgzip per component, imposat al CI

Canvia el tema en viu

Els temes es compilen a variables CSS --z-* — canviar-ne un restilitza a l'instant tots els components d'aquesta pàgina, sense cap cost de re-render. Prova-ho:

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 el que necessita una UI de producció

Un nucli sense dependències, sis paquets especialitzats, cap compromís en els fonaments.

Estils sense runtime

CSS Modules + propietats personalitzades de CSS. Sense CSS-in-JS, sense recàlcul d'estils al render.

Accessible per defecte

Rols WAI-ARIA, suport complet de teclat i un test axe-core a cada component.

48 idiomes

Cada cadena integrada passa pel registre de locales. Els idiomes es carreguen des de fora del bundle.

Headless + Tailwind

Activa el mode unstyled globalment o per component i aporta les teves classes amb el preset de tokens.

Tree-shakable

JS ESM-first i sense sideEffects. La majoria de components queden per sota de 5KB gzip — imposat al CI.

Web + React Native

La mateixa API de components i els mateixos objectes de tema impulsen @zephora/react i @zephora/native.

Escriu menys, publica més

Controlled o uncontrolled, tipat de cap a cap, localitzat de sèrie. El codi de l'esquerra és la demo de la dreta.

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

Puntua amb 4 estrelles o més per veure aparèixer l'alerta.

31 blocs de copiar i enganxar

Heros, taulers, formularis d'inici de sessió, graelles de productes — seccions completes fetes amb components Zephora. Copia el codi, enganxa'l i llestos.