Kurkite greičiau su pilnu React UI rinkiniu
82+ prieinamų, temomis pritaikomų, tree-shakable komponentų Web ir React Native — su gyvomis temomis, 48 kalbomis ir integruotu headless Tailwind režimu.
Keiskite temą gyvai
Temos kompiliuojamos į --z-* CSS kintamuosius — perjungus vieną, visi šio puslapio komponentai akimirksniu perpiešiami be jokių re-render sąnaudų. Išbandykite:
| # | 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 |
Viskas, ko reikia gamybinei UI
Vienas branduolys be priklausomybių, šeši kryptingi paketai, jokių kompromisų dėl pagrindų.
Stiliai be runtime
CSS Modules + CSS custom properties. Jokio CSS-in-JS, jokio stilių perskaičiavimo renderinant.
Prieinama pagal numatytuosius nustatymus
WAI-ARIA vaidmenys, pilnas klaviatūros palaikymas ir axe-core testas kiekvienam komponentui.
48 kalbos
Kiekviena integruota eilutė eina per locale registrą. Kalbos įkeliamos iš už bundle ribų.
Headless + Tailwind
Įjunkite unstyled globaliai ar atskiram komponentui ir naudokite savo klases per token preset.
Tree-shakable
ESM-first, be sideEffects JS. Dauguma komponentų telpa į mažiau nei 5KB gzip — tai užtikrina CI.
Web + React Native
Tas pats komponentų API ir tie patys temų objektai valdo @zephora/react ir @zephora/native.
Rašykite mažiau, pristatykite daugiau
Controlled arba uncontrolled, tipizuota nuo pradžios iki galo, lokalizuota iš karto. Kodas kairėje — demonstracija dešinėje.
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>
);
}Įvertinkite 4+ žvaigždutėmis, kad pamatytumėte įspėjimą.
31 kopijuok-įklijuok blokų
Hero sekcijos, valdymo skydeliai, prisijungimo formos, produktų tinkleliai — pilnos sekcijos iš Zephora komponentų. Nukopijuokite kodą, įklijuokite, baigta.