Développez plus vite avec un kit UI React complet
82+ composants accessibles, thémables et tree-shakable pour le Web et React Native — avec theming en direct, 48 langues et un mode Tailwind headless intégré.
Thémez en direct
Les thèmes se compilent en variables CSS --z-* — en changer un restyle instantanément chaque composant de cette page, sans aucun coût de re-render. Essayez :
| # | 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 |
Tout ce qu'une UI de production exige
Un cœur sans dépendance, six packages ciblés, aucun compromis sur les fondamentaux.
Styles zéro runtime
CSS Modules + propriétés personnalisées CSS. Pas de CSS-in-JS, pas de recalcul de style au rendu.
Accessible par défaut
Rôles WAI-ARIA, prise en charge complète du clavier et un test axe-core sur chaque composant.
48 langues
Chaque chaîne intégrée passe par le registre de locales. Les locales se chargent hors du bundle.
Headless + Tailwind
Activez unstyled globalement ou par composant et apportez vos propres classes via le preset de tokens.
Tree-shakable
JS ESM-first, sans sideEffects. La plupart des composants restent sous 5KB gzip — imposé en CI.
Web + React Native
La même API de composants et les mêmes objets de thème pilotent @zephora/react et @zephora/native.
Écrivez moins, livrez plus
Controlled ou uncontrolled, typé de bout en bout, localisé d'origine. Le code à gauche est la démo à droite.
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>
);
}Attribuez 4 étoiles ou plus pour faire apparaître l'alerte.
31 blocs à copier-coller
Heroes, dashboards, formulaires de connexion, grilles de produits — des sections complètes construites avec les composants Zephora. Copiez le code, collez, c'est fait.