Rakenna nopeammin täydellisellä React-UI-kitillä
82+ saavutettavaa, teemoitettavaa, tree-shakable-komponenttia webiin ja React Nativeen — mukana live-teemat, 48 kieltä ja sisäänrakennettu headless Tailwind -tila.
Teemoita livenä
Teemat kääntyvät --z-* CSS-muuttujiksi — vaihto tyylittää tämän sivun jokaisen komponentin välittömästi uudelleen, ilman re-render-kustannusta. Kokeile:
| # | 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 |
Kaikki mitä tuotanto-UI tarvitsee
Yksi riippuvuudeton ydin, kuusi fokusoitua pakettia, ei kompromisseja perusasioissa.
Zero-runtime-tyylit
CSS Modules + CSS custom properties. Ei CSS-in-JS:ää, ei tyylilaskentaa renderöinnissä.
Saavutettava oletuksena
WAI-ARIA-roolit, täysi näppäimistötuki ja axe-core-testi jokaisella komponentilla.
48 kieltä
Jokainen sisäänrakennettu teksti kulkee locale-rekisterin kautta. Kielipaketit ladataan bundlen ulkopuolelta.
Headless + Tailwind
Kytke unstyled päälle globaalisti tai komponenttikohtaisesti ja tuo omat luokkasi token-presetin kautta.
Tree-shakable
ESM-first, sideEffects-vapaa JS. Useimmat komponentit pysyvät alle 5KB gzip — CI valvoo.
Web + React Native
Sama komponentti-API ja samat teemaobjektit ohjaavat @zephora/react- ja @zephora/native-paketteja.
Kirjoita vähemmän, toimita enemmän
Controlled tai uncontrolled, tyypitetty päästä päähän, lokalisoitu suoraan paketista. Vasemman puolen koodi on oikean puolen demo.
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>
);
}Anna vähintään 4 tähteä, niin ilmoitus tulee näkyviin.
31 kopioi ja liitä -lohkoa
Herot, dashboardit, kirjautumislomakkeet, tuoteruudukot — kokonaisia osioita Zephora-komponenteista. Kopioi koodi, liitä, valmis.