Bouw sneller met een complete React-UI-kit
82+ toegankelijke, tree-shakable componenten met themaondersteuning voor web en React Native — met live theming, 48 talen en een ingebouwde headless Tailwind-modus.
Pas het thema live aan
Thema's compileren naar --z-* CSS-variabelen — één wissel herstijlt elk component op deze pagina direct, zonder re-render-kosten. Probeer het:
| # | 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 wat een productie-UI nodig heeft
Eén dependency-vrije kern, zes gerichte packages, geen compromissen op de fundamenten.
Zero-runtime styling
CSS Modules + CSS custom properties. Geen CSS-in-JS, geen stijlberekening tijdens het renderen.
Standaard toegankelijk
WAI-ARIA-rollen, volledige toetsenbordondersteuning en een axe-core-test op elk afzonderlijk component.
48 talen
Elke ingebouwde tekst loopt via het locale-register. Locales laden buiten de bundle.
Headless + Tailwind
Zet unstyled globaal of per component aan en breng je eigen classes mee via de token-preset.
Tree-shakable
ESM-first JS zonder sideEffects. De meeste componenten blijven onder 5KB gzip — afgedwongen in CI.
Web + React Native
Dezelfde component-API en dezelfde themaobjecten sturen @zephora/react en @zephora/native aan.
Schrijf minder, lever meer
Controlled of uncontrolled, end-to-end getypeerd, standaard gelokaliseerd. De code links is de 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>
);
}Geef 4+ sterren om de alert te laten verschijnen.
31 copy-paste-blokken
Hero's, dashboards, inlogformulieren, productgrids — complete secties opgebouwd uit Zephora-componenten. Code kopiëren, plakken, klaar.