ابنِ أسرع مع حزمة React UI متكاملة
أكثر من 82 مكوّن قابل للوصول والتخصيص بالسمات وقابل لـ tree-shaking للويب وReact Native — مع سمات حية و48 لغة ووضع Tailwind بلا واجهة (headless) مدمج.
جرّب السمات مباشرة
تُترجم السمات إلى متغيّرات CSS باسم --z-* — تبديل سمة واحدة يعيد تلوين كل مكوّن في هذه الصفحة فورًا وبدون أي تكلفة إعادة 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 |
كل ما تحتاجه واجهة إنتاجية
نواة واحدة بلا تبعيات، ست حزم مركّزة، ولا تنازل عن الأساسيات.
تنسيق بدون وقت تشغيل
CSS Modules + خصائص CSS المخصصة. لا CSS-in-JS، ولا إعادة حساب للأنماط عند الـ render.
قابل للوصول افتراضيًا
أدوار WAI-ARIA، دعم كامل للوحة المفاتيح، واختبار axe-core على كل مكوّن.
48 لغة
كل نص مدمج يمر عبر سجل اللغات. تُحمَّل اللغات من خارج الحزمة.
بلا واجهة + Tailwind
فعّل الوضع غير المنسّق (unstyled) عالميًا أو لكل مكوّن، وأحضر أصنافك الخاصة عبر token preset.
قابل لـ tree-shaking
JS بأولوية ESM وخالٍ من sideEffects. معظم المكوّنات أقل من 5KB gzip — مفروض في CI.
ويب + React Native
نفس واجهة API للمكوّنات ونفس كائنات السمات تشغّل @zephora/react و@zephora/native.
اكتب أقل، أنجز أكثر
متحكَّم به أو غير متحكَّم به، منمّط الأنواع من البداية إلى النهاية، ومترجم جاهزًا. الكود على اليسار هو العرض التجريبي على اليمين.
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. انسخ الكود، الصق، انتهيت.