Xây dựng nhanh hơn với bộ UI kit React hoàn chỉnh
82+ component cho Web và React Native — dễ tiếp cận, tùy biến chủ đề, hỗ trợ tree-shaking — kèm theme trực tiếp, 48 ngôn ngữ và chế độ headless Tailwind tích hợp sẵn.
Đổi chủ đề trực tiếp
Chủ đề được biên dịch thành biến CSS --z-* — chuyển một chủ đề sẽ thay áo mọi component trên trang này ngay lập tức, không tốn chi phí re-render. Thử ngay:
| # | 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 |
Mọi thứ một UI production cần
Một core không phụ thuộc, sáu package chuyên biệt, không thỏa hiệp ở những điều căn bản.
Styling zero-runtime
CSS Modules + CSS custom properties. Không CSS-in-JS, không tính lại style khi render.
Dễ tiếp cận mặc định
Vai trò WAI-ARIA, hỗ trợ bàn phím đầy đủ và kiểm thử axe-core trên từng component.
48 ngôn ngữ
Mọi chuỗi tích hợp sẵn đều đi qua locale registry. Ngôn ngữ được tải từ ngoài bundle.
Headless + Tailwind
Bật unstyled toàn cục hoặc theo từng component và dùng class của riêng bạn qua token preset.
Hỗ trợ tree-shaking
JS ưu tiên ESM, không sideEffects. Hầu hết component dưới 5KB gzip — CI kiểm soát.
Web + React Native
Cùng một API component và cùng các đối tượng theme vận hành cả @zephora/react lẫn @zephora/native.
Viết ít hơn, giao nhiều hơn
Controlled hoặc uncontrolled, có kiểu từ đầu đến cuối, bản địa hóa sẵn. Đoạn mã bên trái chính là bản demo bên phải.
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>
);
}Đánh giá từ 4 sao trở lên để thấy cảnh báo xuất hiện.
31 khối sao chép-dán
Hero, dashboard, form đăng nhập, lưới sản phẩm — các section hoàn chỉnh dựng từ component Zephora. Sao chép mã, dán, xong.