আরও দ্রুত তৈরি করুন একটি পরিপূর্ণ React UI কিট দিয়ে
Web ও React Native-এর জন্য 82+ অ্যাক্সেসযোগ্য, থিমযোগ্য, tree-shakable কম্পোনেন্ট — লাইভ থিমিং, ৪৮টি ভাষা এবং বিল্ট-ইন 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 পরীক্ষা।
৪৮টি ভাষা
প্রতিটি বিল্ট-ইন স্ট্রিং 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>
);
}অ্যালার্ট দেখতে ৪ বা তার বেশি স্টার দিন।
31টি কপি-পেস্ট ব্লক
হিরো, ড্যাশবোর্ড, সাইন-ইন ফর্ম, প্রোডাক্ট গ্রিড — Zephora কম্পোনেন্ট দিয়ে বানানো পূর্ণাঙ্গ সেকশন। কোড কপি করুন, পেস্ট করুন, শেষ।