Jenga haraka zaidi kwa kifurushi kamili cha React UI
Vijenzi 82+ vinavyofikika, vinavyoweza kubadilishwa mandhari na tree-shakable kwa Web na React Native — vikiwa na mandhari ya moja kwa moja, lugha 48 na hali ya headless Tailwind iliyojengwa ndani.
Badilisha mandhari papo hapo
Mandhari hukusanywa kuwa vigezo vya CSS vya --z-* — kubadilisha moja hupaka upya kila kijenzi kwenye ukurasa huu papo hapo, bila gharama yoyote ya re-render. Jaribu:
| # | 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 |
Kila kitu ambacho UI ya uzalishaji inahitaji
Kiini kimoja kisicho na utegemezi, vifurushi sita vilivyolengwa, hakuna maafikiano kwenye misingi.
Mitindo bila runtime
CSS Modules + CSS custom properties. Hakuna CSS-in-JS, hakuna kukokotoa upya mitindo wakati wa render.
Inafikika kwa chaguomsingi
Majukumu ya WAI-ARIA, usaidizi kamili wa kibodi na jaribio la axe-core kwenye kila kijenzi.
Lugha 48
Kila maandishi yaliyojengwa ndani hupitia rejista ya locale. Lugha hupakiwa kutoka nje ya bundle.
Headless + Tailwind
Washa unstyled kimataifa au kwa kila kijenzi na ulete madarasa yako kupitia token preset.
Tree-shakable
JS ya ESM-kwanza, isiyo na sideEffects. Vijenzi vingi hubaki chini ya 5KB gzip — inasimamiwa na CI.
Web + React Native
API ile ile ya vijenzi na vitu vile vile vya mandhari vinaendesha @zephora/react na @zephora/native.
Andika kidogo, wasilisha zaidi
Controlled au uncontrolled, yenye aina kuanzia mwanzo hadi mwisho, imejanibishwa tayari. Msimbo wa kushoto ndio onyesho la kulia.
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>
);
}Kadiria nyota 4+ ili kuona tahadhari ikionekana.
Bloku 31 za kunakili na kubandika
Hero, dashibodi, fomu za kuingia, gridi za bidhaa — sehemu kamili zilizojengwa kwa vijenzi vya Zephora. Nakili msimbo, bandika, imekamilika.