สร้างได้เร็วขึ้นด้วย ชุด UI React ที่ครบครัน
คอมโพเนนต์ 82+ รายการสำหรับ Web และ React Native ที่เข้าถึงได้ ปรับธีมได้ และรองรับ tree-shaking — พร้อมธีมสด 48 ภาษา และโหมด headless Tailwind ในตัว
เปลี่ยนธีมแบบสด ๆ
ธีมถูกคอมไพล์เป็นตัวแปร 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 ระดับโปรดักชันต้องการ
คอร์เดียวไร้ dependency, หกแพ็กเกจที่โฟกัสชัดเจน ไม่ประนีประนอมกับพื้นฐาน
สไตล์แบบ zero-runtime
CSS Modules + CSS custom properties ไม่มี CSS-in-JS ไม่มีการคำนวณสไตล์ใหม่ตอน render
เข้าถึงได้เป็นค่าเริ่มต้น
บทบาท WAI-ARIA, รองรับคีย์บอร์ดเต็มรูปแบบ และการทดสอบ axe-core ในทุกคอมโพเนนต์
48 ภาษา
ข้อความในตัวทั้งหมดไหลผ่าน locale registry โดยภาษาโหลดจากภายนอกบันเดิล
Headless + Tailwind
สลับเป็น unstyled ได้ทั้งแบบ global หรือรายคอมโพเนนต์ และใช้คลาสของคุณเองผ่าน token preset
รองรับ tree-shaking
JS แบบ ESM-first ปลอด 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 คัดลอกโค้ด วาง เสร็จเลย