तेज़ी से बनाएं, एक संपूर्ण React UI किट के साथ
Web और React Native के लिए 82+ एक्सेसिबल, थीम-योग्य, tree-shakable कंपोनेंट — लाइव थीमिंग, 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 की हर ज़रूरत
एक डिपेंडेंसी-मुक्त कोर, छह केंद्रित पैकेज, बुनियादी बातों पर कोई समझौता नहीं।
ज़ीरो-रनटाइम स्टाइलिंग
CSS Modules + CSS कस्टम प्रॉपर्टीज़। न CSS-in-JS, न रेंडर पर स्टाइल की दोबारा गणना।
डिफ़ॉल्ट रूप से एक्सेसिबल
WAI-ARIA रोल, पूर्ण कीबोर्ड समर्थन और हर एक कंपोनेंट पर axe-core परीक्षण।
48 भाषाएँ
हर बिल्ट-इन स्ट्रिंग locale रजिस्ट्री से होकर गुज़रती है। भाषाएँ बंडल के बाहर से लोड होती हैं।
Headless + Tailwind
unstyled को ग्लोबल या प्रति-कंपोनेंट चालू करें और token preset के ज़रिए अपनी क्लासेज़ लाएँ।
Tree-shakable
ESM-प्रथम, 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 कॉपी-पेस्ट ब्लॉक
हीरो, डैशबोर्ड, साइन-इन फ़ॉर्म, प्रोडक्ट ग्रिड — Zephora कंपोनेंट्स से बने पूर्ण सेक्शन। कोड कॉपी करें, पेस्ट करें, हो गया।