ააწყვეთ უფრო სწრაფად სრული React UI ნაკრებით
82+ ხელმისაწვდომი, თემებით მორგებადი, tree-shakable კომპონენტი Web-ისა და React Native-ისთვის — ცოცხალი თემებით, 48 ენით და ჩაშენებული headless Tailwind რეჟიმით.
შეცვალეთ თემა ცოცხლად
თემები --z-* CSS ცვლადებად კომპილირდება — ერთის გადართვა ამ გვერდის ყველა კომპონენტს მყისიერად გადაღებავს, ნულოვანი re-render ხარჯით. სცადეთ:
| # | 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 |
ყველაფერი, რაც საწარმოო UI-ს სჭირდება
ერთი ბირთვი დამოკიდებულებების გარეშე, ექვსი ფოკუსირებული პაკეტი, საფუძვლებზე კომპრომისის გარეშე.
ნულოვანი runtime სტილიზაცია
CSS Modules + CSS custom properties. არავითარი CSS-in-JS, არავითარი სტილების გადათვლა render-ზე.
ნაგულისხმევად ხელმისაწვდომი
WAI-ARIA როლები, კლავიატურის სრული მხარდაჭერა და axe-core ტესტი ყველა კომპონენტზე.
48 ენა
ყველა ჩაშენებული ტექსტი locale რეესტრში გადის. ენები bundle-ის გარედან იტვირთება.
Headless + Tailwind
ჩართეთ unstyled გლობალურად ან თითო კომპონენტზე და მოიტანეთ საკუთარი კლასები token preset-ით.
Tree-shakable
ESM-first, sideEffects-ის გარეშე JS. კომპონენტების უმეტესობა 5KB gzip-ზე ნაკლებია — CI აკონტროლებს.
Web + React Native
ერთი და იგივე კომპონენტის API და თემის ობიექტები ამუშავებს @zephora/react-სა და @zephora/native-ს.
წერეთ ნაკლები, გამოუშვით მეტი
Controlled ან uncontrolled, ბოლომდე ტიპიზირებული, თავიდანვე ლოკალიზებული. მარცხენა კოდი მარჯვენა დემოა.
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>
);
}შეტყობინების სანახავად შეაფასეთ 4+ ვარსკვლავით.
31 კოპირება-ჩასმის ბლოკი
Hero-ები, დაფები, შესვლის ფორმები, პროდუქტების ბადეები — Zephora კომპონენტებით აწყობილი სრული სექციები. დააკოპირეთ კოდი, ჩასვით, მზადაა.