Premiers pas

Zephora UI est distribué sous forme de paquets scoped. Installez le paquet React et le moteur de thème, importez une seule fois la feuille de style de base, puis composez.

Installation

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

Utilisation

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

Chaque paquet est ESM-first avec sideEffects limité au CSS. N'importez que ce que vous utilisez ; les bundlers éliminent le reste. Le budget gzip par composant (~5KB) est vérifié en CI avec size-limit.