Bắt đầu

Zephora UI được phát hành dưới dạng các gói scoped. Cài đặt gói React cùng với engine theme, import tệp stylesheet cơ sở một lần và kết hợp lại.

Cài đặt

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

Sử dụng

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

Mọi gói đều ưu tiên ESM với sideEffects chỉ giới hạn ở CSS. Chỉ import những gì bạn dùng; bundler sẽ loại bỏ phần còn lại. Ngân sách gzip cho mỗi component (~5KB) được kiểm soát trong CI bằng size-limit.