سریعتر بسازید با یک کیت کامل React UI
بیش از 82 کامپوننت دسترسپذیر، تمپذیر و tree-shakable برای وب و React Native — با تم زنده، 48 زبان و حالت headless Tailwind داخلی.
تم را زنده تغییر دهید
تمها به متغیرهای CSS با پیشوند --z-* کامپایل میشوند — تعویض یک تم همه کامپوننتهای این صفحه را فوراً و بدون هیچ هزینه 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 در سطح پروداکشن نیاز دارد
یک هسته بدون وابستگی، شش پکیج متمرکز، بدون مصالحه بر سر اصول.
استایلدهی بدون هزینه زمان اجرا
CSS Modules + خصوصیات سفارشی CSS. بدون CSS-in-JS، بدون محاسبه مجدد استایل هنگام رندر.
دسترسپذیر بهصورت پیشفرض
نقشهای WAI-ARIA، پشتیبانی کامل از صفحهکلید و تست axe-core روی تکتک کامپوننتها.
48 زبان
همه متنهای داخلی از رجیستری locale عبور میکنند. زبانها از بیرون باندل بارگذاری میشوند.
Headless + Tailwind
حالت بدون استایل را سراسری یا برای هر کامپوننت فعال کنید و کلاسهای خودتان را از طریق token preset بیاورید.
Tree-shakable
JS مبتنی بر ESM و بدون sideEffects. بیشتر کامپوننتها زیر 5KB gzip میمانند — در CI اعمال میشود.
وب + 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. کد را کپی کنید، پیست کنید، تمام.