Daha hızlı geliştirin: eksiksiz React UI kiti
Web ve React Native için 82+ erişilebilir, temalanabilir, tree-shakable bileşen — canlı tema, 48 dil ve headless Tailwind modu dahili.
Temayı canlı değiştirin
Temalar --z-* CSS değişkenlerine derlenir — birini seçmek bu sayfadaki her bileşeni anında, sıfır re-render maliyetiyle yeniden boyar. Deneyin:
| # | 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 |
Üretim arayüzünün ihtiyacı olan her şey
Bağımlılıksız tek çekirdek, altı odaklı paket, temellerden ödün yok.
Sıfır çalışma zamanı stil
CSS Modules + CSS custom properties. CSS-in-JS yok, render'da stil hesaplaması yok.
Varsayılan olarak erişilebilir
WAI-ARIA rolleri, tam klavye desteği ve her bileşende axe-core testi.
48 dil
Tüm yerleşik metinler locale kayıt defterinden akar. Diller paket dışından yüklenir.
Headless + Tailwind
unstyled'ı global ya da bileşen bazında açın, token preset'iyle kendi sınıflarınızı getirin.
Tree-shakable
ESM öncelikli, sideEffects'siz JS. Çoğu bileşen 5KB gzip altında — CI denetler.
Web + React Native
Aynı bileşen API'si ve aynı tema objeleri @zephora/react ile @zephora/native'i sürer.
Az yazın, çok üretin
Controlled ya da uncontrolled, uçtan uca tipli, kutudan çıktığı gibi yerelleştirilmiş. Soldaki kod, sağdaki 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>
);
}Uyarının görünmesi için 4+ yıldız verin.
31 kopyala-yapıştır blok
Hero'lar, dashboard'lar, giriş formları, ürün grid'leri — Zephora bileşenlerinden kurulmuş tam bölümler. Kodu kopyala, yapıştır, bitti.