শুরু করুন

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 দিয়ে প্রয়োগ করা হয়।