更快构建，就用这套完整的 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 预设使用你自己的类名。

支持 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 组件构建的完整区块。复制代码，粘贴，完成。