加速開發，就靠這套完整的 React UI 套件

82+ 個支援 Web 與 React Native 的元件，具備無障礙、可主題化、可 tree-shaking 的特性 — 內建即時主題、48 種語言與 headless Tailwind 模式。

npm install @zephora/react @zephora/theme

82+個元件，Web + Native

48種現成語言包

100%通過 axe-core 測試，WAI-ARIA

~5KB單一元件 gzip 大小，由 CI 強制

即時切換主題

主題會編譯成 --z-* CSS 變數 — 切換一個主題，本頁所有元件立即換上新樣式，零重新渲染成本。試試看：

#		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 種語言

所有內建字串都經過語言註冊表。語言包從 bundle 外部載入。

Headless + Tailwind

可全域或依元件切換 unstyled，透過 token 預設集帶入你自己的 class。

支援 tree-shaking

ESM 優先、無 sideEffects 的 JS。多數元件 gzip 後低於 5KB — 由 CI 強制。

Web + React Native

同一套元件 API 與同一組主題物件，同時驅動 @zephora/react 與 @zephora/native。

寫得更少，交付更多

受控或非受控皆可，端對端型別安全，開箱即在地化。左邊的程式碼就是右邊的示範。

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 元件打造的完整區塊。複製程式碼，貼上，完成。