Construye más rápido con un kit de UI React completo
82+ componentes accesibles, tematizables y tree-shakable para Web y React Native — con temas en vivo, 48 idiomas y modo Tailwind headless integrado.
Tematiza en vivo
Los temas se compilan a variables CSS --z-* — cambiar uno reestiliza al instante cada componente de esta página, sin coste de re-render. Pruébalo:
| # | 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 |
Todo lo que necesita una UI de producción
Un núcleo sin dependencias, seis paquetes enfocados, sin concesiones en lo fundamental.
Estilos sin runtime
CSS Modules + propiedades personalizadas de CSS. Sin CSS-in-JS, sin recálculo de estilos al renderizar.
Accesible por defecto
Roles WAI-ARIA, soporte completo de teclado y un test de axe-core en cada componente.
48 idiomas
Cada cadena integrada pasa por el registro de locales. Los locales se cargan fuera del bundle.
Headless + Tailwind
Activa unstyled de forma global o por componente y aporta tus propias clases con el preset de tokens.
Tree-shakable
JS ESM-first y libre de sideEffects. La mayoría de los componentes quedan por debajo de 5KB gzip — exigido en CI.
Web + React Native
La misma API de componentes y los mismos objetos de tema impulsan @zephora/react y @zephora/native.
Escribe menos, entrega más
Controlled o uncontrolled, tipado de extremo a extremo, localizado de serie. El código de la izquierda es la demo de la derecha.
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>
);
}Valora con 4+ estrellas para que aparezca la alerta.
31 bloques de copiar y pegar
Heroes, dashboards, formularios de inicio de sesión, cuadrículas de productos — secciones completas construidas con componentes de Zephora. Copia el código, pega y listo.