Bina lebih pantas dengan kit UI React yang lengkap
82+ komponen yang boleh diakses, boleh ditema dan tree-shakable untuk Web dan React Native — dengan tema langsung, 48 bahasa dan mod headless Tailwind terbina dalam.
Tukar tema secara langsung
Tema dikompilasi kepada pemboleh ubah CSS --z-* — menukar satu tema akan menggayakan semula setiap komponen di halaman ini serta-merta, tanpa kos re-render. Cubalah:
| # | 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 |
Semua yang diperlukan UI produksi
Satu core bebas kebergantungan, enam pakej yang berfokus, tiada kompromi pada asas.
Penggayaan zero-runtime
CSS Modules + CSS custom properties. Tiada CSS-in-JS, tiada pengiraan semula gaya semasa render.
Boleh diakses secara lalai
Peranan WAI-ARIA, sokongan papan kekunci penuh dan ujian axe-core pada setiap komponen.
48 bahasa
Semua rentetan terbina dalam mengalir melalui registri locale. Bahasa dimuatkan dari luar bundle.
Headless + Tailwind
Aktifkan unstyled secara global atau per komponen dan bawa kelas anda sendiri melalui pratetap token.
Tree-shakable
JS ESM dahulu, bebas sideEffects. Kebanyakan komponen kekal bawah 5KB gzip — dikuatkuasakan dalam CI.
Web + React Native
API komponen yang sama dan objek tema yang sama memacu @zephora/react dan @zephora/native.
Tulis kurang, hantar lebih
Controlled atau uncontrolled, bertaip dari hujung ke hujung, disetempatkan sedia ada. Kod di kiri ialah demo di kanan.
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>
);
}Beri penilaian 4 bintang ke atas untuk melihat amaran muncul.
31 blok salin-tampal
Hero, papan pemuka, borang log masuk, grid produk — seksyen penuh yang dibina daripada komponen Zephora. Salin kod, tampal, siap.