Schneller bauen mit einem kompletten React-UI-Kit
82+ barrierefreie, themenfähige, tree-shakable Komponenten für Web und React Native — mit Live-Theming, 48 Sprachen und integriertem headless Tailwind-Modus.
Theming in Echtzeit
Themes kompilieren zu --z-* CSS-Variablen — ein Wechsel gestaltet jede Komponente auf dieser Seite sofort neu, ganz ohne Re-Render-Kosten. Probier es aus:
| # | 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 |
Alles, was eine Produktions-UI braucht
Ein abhängigkeitsfreier Kern, sechs fokussierte Pakete, keine Kompromisse bei den Grundlagen.
Zero-Runtime-Styling
CSS Modules + CSS Custom Properties. Kein CSS-in-JS, keine Stilberechnung beim Rendern.
Standardmäßig barrierefrei
WAI-ARIA-Rollen, volle Tastaturunterstützung und ein axe-core-Test für jede einzelne Komponente.
48 Sprachen
Jeder eingebaute Text läuft über die Locale-Registry. Sprachpakete laden außerhalb des Bundles.
Headless + Tailwind
Schalte unstyled global oder pro Komponente um und bring eigene Klassen über das Token-Preset mit.
Tree-shakable
ESM-first, sideEffects-freies JS. Die meisten Komponenten bleiben unter 5KB gzip — in CI erzwungen.
Web + React Native
Dieselbe Komponenten-API und dieselben Theme-Objekte treiben @zephora/react und @zephora/native an.
Weniger schreiben, mehr liefern
Controlled oder uncontrolled, durchgehend typisiert, lokalisiert out of the box. Der Code links ist die Demo rechts.
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>
);
}Vergib 4+ Sterne, damit der Alert erscheint.
31 Copy-Paste-Blöcke
Heroes, Dashboards, Anmeldeformulare, Produktraster — komplette Sektionen aus Zephora-Komponenten. Code kopieren, einfügen, fertig.