快速上手

Zephora UI 以範圍化（scoped）套件形式發行。安裝 React 套件與主題引擎，將基礎樣式表匯入一次，即可組合使用。

安裝

npm install @zephora/react @zephora/theme @zephora/tokens
# React Native
npm install @zephora/native @zephora/theme @zephora/tokens

使用

import "@zephora/react/styles.css";
import { Button, Card, CardBody, Input } from "@zephora/react";
import { ThemeProvider, darkTheme } from "@zephora/theme";

export default function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Card>
        <CardBody>
          <Input placeholder="Email" />
          <Button>Save</Button>
        </CardBody>
      </Card>
    </ThemeProvider>
  );
}

React Native

import { ZephoraProvider, Button } from "@zephora/native";
import { darkTheme } from "@zephora/theme";

export default function App() {
  return (
    <ZephoraProvider theme={darkTheme}>
      <Button onPress={() => {}}>Save</Button>
    </ZephoraProvider>
  );
}

Tree shaking

每個套件皆以 ESM 為優先，sideEffects 僅限於 CSS。只匯入你會用到的部分；打包工具會捨棄其餘內容。每個元件的 gzip 預算（約 5KB）由 CI 透過 size-limit 強制執行。