より速く開発できる、完全な React UI キット

Web と React Native 向けの 82+ 個のアクセシブルでテーマ対応、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 に必要なものすべて

依存関係ゼロの単一コア、6 つの焦点を絞ったパッケージ、基本に一切の妥協なし。

ゼロランタイムのスタイリング

CSS Modules + CSS カスタムプロパティ。CSS-in-JS なし、レンダリング時のスタイル再計算なし。

デフォルトでアクセシブル

WAI-ARIA ロール、完全なキーボード対応、そして全コンポーネントに axe-core テスト。

48 言語

すべての組み込み文字列はロケールレジストリを経由します。ロケールはバンドルの外から読み込まれます。

Headless + Tailwind

unstyled をグローバルまたはコンポーネント単位で切り替え、トークンプリセット経由で独自のクラスを適用できます。

Tree-shaking 対応

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 コンポーネントで組み立てられた完全なセクション。コードをコピーして貼り付けるだけで完成。