בנו מהר יותר עם ערכת React UI שלמה
82+ רכיבים נגישים, ניתנים להתאמת ערכת נושא ו-tree-shakable ל-Web ול-React Native — עם ערכות נושא חיות, 48 שפות ומצב Tailwind headless מובנה.
התאימו את ערכת הנושא בזמן אמת
ערכות נושא מתקמפלות למשתני 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 בפרודקשן צריך
ליבה אחת ללא תלויות, שש חבילות ממוקדות, בלי פשרות ביסודות.
עיצוב ללא runtime
CSS Modules + CSS custom properties. בלי CSS-in-JS, בלי חישוב סגנונות מחדש ברינדור.
נגיש כברירת מחדל
תפקידי WAI-ARIA, תמיכה מלאה במקלדת ובדיקת axe-core על כל רכיב ורכיב.
48 שפות
כל מחרוזת מובנית עוברת דרך רישום ה-locale. השפות נטענות מחוץ ל-bundle.
Headless + Tailwind
הפעילו מצב לא מעוצב גלובלית או לכל רכיב, והביאו מחלקות משלכם דרך ה-token preset.
Tree-shakable
JS מבוסס ESM ונטול sideEffects. רוב הרכיבים נשארים מתחת ל-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. מעתיקים את הקוד, מדביקים, סיימתם.