Zephora UI

ابنِ أسرع مع حزمة React UI متكاملة

أكثر من 82 مكوّن قابل للوصول والتخصيص بالسمات وقابل لـ tree-shaking للويب وReact Native — مع سمات حية و48 لغة ووضع Tailwind بلا واجهة (headless) مدمج.

npm install @zephora/react @zephora/theme
82+مكوّنًا، ويب + Native
48لغة جاهزة
100%مختبَر بـ axe-core، متوافق مع WAI-ARIA
~5KBgzip لكل مكوّن، مفروض عبر CI

جرّب السمات مباشرة

تُترجم السمات إلى متغيّرات CSS باسم --z-* — تبديل سمة واحدة يعيد تلوين كل مكوّن في هذه الصفحة فورًا وبدون أي تكلفة إعادة render. جرّب:

applyTheme()
#Status
1042Ada LovelacePaid$129.00
1041Grace HopperPending$89.00
1040Alan TuringPaid$249.00
1039Katherine J.Refunded$59.00
ZA
Zeynep Aksoy
Product designer
Email notifications
All systems operational
Deploy #482 finished in 2m 14s.

كل ما تحتاجه واجهة إنتاجية

نواة واحدة بلا تبعيات، ست حزم مركّزة، ولا تنازل عن الأساسيات.

تنسيق بدون وقت تشغيل

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. انسخ الكود، الصق، انتهيت.