Build faster with a complete React UI kit
82+ accessible, themeable, tree-shakable components for Web and React Native — with live theming, 48 locales and a headless Tailwind mode built in.
Theme it live
Themes compile to --z-* CSS variables — switching one restyles every component on this page instantly, with zero re-render cost. Try it:
| # | 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 |
Everything a production UI needs
One dependency-free core, six focused packages, no compromises on the fundamentals.
Zero-runtime styling
CSS Modules + CSS custom properties. No CSS-in-JS, no style recalculation on render.
Accessible by default
WAI-ARIA roles, full keyboard support and an axe-core test on every single component.
48 languages
Every built-in string flows through the locale registry. Locales load from outside the bundle.
Headless + Tailwind
Flip unstyled globally or per component and bring your own classes via the token preset.
Tree-shakable
ESM-first, sideEffects-free JS. Most components stay under 5KB gzip — enforced in CI.
Web + React Native
The same component API and the same theme objects drive @zephora/react and @zephora/native.
Write less, ship more
Controlled or uncontrolled, typed end to end, localized out of the box. The code on the left is the demo on the right.
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>
);
}Rate 4+ stars to see the alert appear.
31 copy-paste blocks
Heroes, dashboards, sign-in forms, product grids — full sections built from Zephora components. Copy the code, paste, done.