Twórz szybciej z kompletnym zestawem UI dla Reacta
82+ dostępnych, motywowalnych, tree-shakable komponentów dla Web i React Native — z motywami na żywo, 48 językami i wbudowanym trybem headless Tailwind.
Zmieniaj motyw na żywo
Motywy kompilują się do zmiennych CSS --z-* — zmiana jednego natychmiast przestylowuje każdy komponent na tej stronie, bez kosztu re-renderu. Wypróbuj:
| # | 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 |
Wszystko, czego potrzebuje produkcyjny UI
Jeden rdzeń bez zależności, sześć wyspecjalizowanych pakietów, żadnych kompromisów w podstawach.
Stylowanie bez runtime'u
CSS Modules + CSS custom properties. Bez CSS-in-JS, bez przeliczania stylów przy renderze.
Dostępność domyślnie
Role WAI-ARIA, pełna obsługa klawiatury i test axe-core dla każdego komponentu.
48 języków
Każdy wbudowany tekst przechodzi przez rejestr locale. Języki ładują się spoza bundle'a.
Headless + Tailwind
Włącz tryb unstyled globalnie lub per komponent i użyj własnych klas dzięki presetowi tokenów.
Tree-shakable
ESM-first, JS bez sideEffects. Większość komponentów pozostaje poniżej 5KB gzip — pilnowane w CI.
Web + React Native
To samo API komponentów i te same obiekty motywów napędzają @zephora/react i @zephora/native.
Pisz mniej, dostarczaj więcej
Controlled lub uncontrolled, w pełni typowane, zlokalizowane od ręki. Kod po lewej to demo po prawej.
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>
);
}Oceń na 4+ gwiazdki, aby zobaczyć alert.
31 bloków copy-paste
Sekcje hero, dashboardy, formularze logowania, siatki produktów — całe sekcje zbudowane z komponentów Zephora. Skopiuj kod, wklej, gotowe.