Daha sürətli qurun: tam React UI dəsti
Web və React Native üçün 82+ əlçatan, temalana bilən, tree-shakable komponent — canlı tema, 48 dil və daxili headless Tailwind rejimi ilə.
Temanı canlı dəyişin
Temalar --z-* CSS dəyişənlərinə kompilyasiya olunur — birini seçmək bu səhifədəki hər komponenti dərhal, sıfır re-render xərci ilə yenidən boyayır. Sınayın:
| # | 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 |
Produksiya UI-nin ehtiyacı olan hər şey
Asılılıqsız tək nüvə, altı fokuslanmış paket, əsaslardan güzəşt yoxdur.
Sıfır runtime stil
CSS Modules + CSS custom properties. CSS-in-JS yoxdur, render zamanı stil hesablanması yoxdur.
Defolt olaraq əlçatan
WAI-ARIA rolları, tam klaviatura dəstəyi və hər komponentdə axe-core testi.
48 dil
Bütün daxili mətnlər locale reyestrindən keçir. Dillər bundle-dan kənardan yüklənir.
Headless + Tailwind
unstyled-ı qlobal və ya komponent səviyyəsində aktivləşdirin, token preset ilə öz siniflərinizi gətirin.
Tree-shakable
ESM-first, sideEffects-siz JS. Komponentlərin çoxu 5KB gzip altındadır — CI nəzarət edir.
Web + React Native
Eyni komponent API-si və eyni tema obyektləri @zephora/react və @zephora/native-i idarə edir.
Az yazın, çox təqdim edin
Controlled və ya uncontrolled, başdan sona tipli, qutudan çıxan kimi lokallaşdırılmış. Soldakı kod sağdakı demodur.
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>
);
}Xəbərdarlığın görünməsi üçün 4+ ulduz verin.
31 kopyala-yapışdır blok
Hero-lar, idarə panelləri, giriş formaları, məhsul grid-ləri — Zephora komponentlərindən qurulmuş tam bölmələr. Kodu kopyala, yapışdır, hazırdır.