시작하기

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>
  );
}

트리 셰이킹

모든 패키지는 ESM 우선이며 sideEffects는 CSS로만 제한됩니다. 사용하는 것만 가져오면 번들러가 나머지를 제거합니다. 컴포넌트별 gzip 예산(~5KB)은 size-limit로 CI에서 강제됩니다.