@zephora/react

Styled Web components for Zephora UI — 82 accessible, themeable, tree-shakable React components built on CSS Modules + CSS custom properties (no CSS-in-JS runtime), with an optional headless mode.

The same public API is available for React Native as @zephora/native.

Install

npm install @zephora/react @zephora/theme @zephora/tokens

Requires React ≥ 18.

Usage

import "@zephora/react/styles.css";
import { Button, Card, CardBody, Input } from "@zephora/react";
import { ThemeProvider, darkTheme } from "@zephora/theme";

export default function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Card>
        <CardBody>
          <Input placeholder="Email" />
          <Button onClick={() => console.log("hi")}>Save</Button>
        </CardBody>
      </Card>
    </ThemeProvider>
  );
}

Highlights

• 82 components across form, layout, navigation, data, overlay, feedback and more.
• Accessible — WAI-ARIA roles, full keyboard support, axe-tested; RTL out of the box.
• Live theming via --z-* CSS variables; light / dark / aura / material + createTheme().
• 48 locales loaded from outside the bundle; global config via ZephoraConfigProvider.
• Headless mode — pass unstyled and style with the Tailwind preset.
• Tree-shakable, ESM + CJS + .d.ts, ≈5KB gzip per component.

Documentation

Full docs, live examples, prop tables, blocks and the Theme Designer: zephoraui.com

License

MIT