Zephora UI

Construa mais depressa com um kit de UI React completo

82+ componentes acessíveis, tematizáveis e tree-shakable para Web e React Native — com theming ao vivo, 48 idiomas e modo Tailwind headless integrado.

npm install @zephora/react @zephora/theme
82+componentes, Web + Native
48idiomas prontos a usar
100%testado com axe-core, WAI-ARIA
~5KBgzip por componente, verificado na CI

Mude o tema ao vivo

Os temas compilam para variáveis CSS --z-* — trocar um reestiliza instantaneamente todos os componentes desta página, sem custo de re-render. Experimente:

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.

Tudo o que uma UI de produção precisa

Um núcleo sem dependências, seis pacotes focados, sem cedências nos fundamentos.

Estilos sem runtime

CSS Modules + propriedades personalizadas CSS. Sem CSS-in-JS, sem recálculo de estilos no render.

Acessível por predefinição

Papéis WAI-ARIA, suporte completo de teclado e um teste axe-core em cada componente.

48 idiomas

Todas as strings integradas passam pelo registo de locales. As locales carregam fora do bundle.

Headless + Tailwind

Ative unstyled globalmente ou por componente e traga as suas classes com o preset de tokens.

Tree-shakable

JS ESM-first, sem sideEffects. A maioria dos componentes fica abaixo de 5KB gzip — imposto na CI.

Web + React Native

A mesma API de componentes e os mesmos objetos de tema alimentam o @zephora/react e o @zephora/native.

Escreva menos, entregue mais

Controlled ou uncontrolled, tipado de ponta a ponta, localizado de origem. O código à esquerda é a demo à direita.

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

Atribua 4+ estrelas para fazer o alerta aparecer.

31 blocos de copiar e colar

Heroes, dashboards, formulários de início de sessão, grelhas de produtos — secções completas construídas com componentes Zephora. Copie o código, cole, pronto.