Būvējiet ātrāk ar pilnīgu React UI komplektu
82+ pieejami, ar motīviem pielāgojami, tree-shakable komponenti Web un React Native — ar dzīvo motīvu maiņu, 48 valodām un iebūvētu headless Tailwind režīmu.
Mainiet motīvu dzīvajā
Motīvi tiek kompilēti --z-* CSS mainīgajos — viena pārslēgšana acumirklī pārkrāso katru šīs lapas komponentu bez jebkādām re-render izmaksām. Izmēģiniet:
| # | 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 |
Viss, kas vajadzīgs produkcijas UI
Viens kodols bez atkarībām, sešas mērķtiecīgas pakotnes, nekādu kompromisu pamatos.
Stili bez runtime
CSS Modules + CSS custom properties. Nekāda CSS-in-JS, nekādas stilu pārrēķināšanas renderēšanas laikā.
Pieejams pēc noklusējuma
WAI-ARIA lomas, pilns tastatūras atbalsts un axe-core tests katram komponentam.
48 valodas
Katra iebūvētā virkne iet caur locale reģistru. Valodas tiek ielādētas ārpus bundle.
Headless + Tailwind
Ieslēdziet unstyled globāli vai katram komponentam atsevišķi un izmantojiet savas klases ar token preset.
Tree-shakable
ESM-first, bez sideEffects JS. Lielākā daļa komponentu ir zem 5KB gzip — to nodrošina CI.
Web + React Native
Viens un tas pats komponentu API un tie paši motīvu objekti darbina @zephora/react un @zephora/native.
Rakstiet mazāk, piegādājiet vairāk
Controlled vai uncontrolled, tipizēts no gala līdz galam, lokalizēts uzreiz. Kods pa kreisi ir demo pa labi.
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>
);
}Novērtējiet ar 4+ zvaigznēm, lai redzētu brīdinājumu.
31 kopēt-ielīmēt bloki
Hero sadaļas, informācijas paneļi, pierakstīšanās formas, produktu režģi — pilnas sadaļas no Zephora komponentiem. Nokopējiet kodu, ielīmējiet, gatavs.