گام ۱ — نصب
بسته‌ها داخل همین مخزن‌اند و با فضای کاری به هم وصل می‌شوند.
terminal
pnpm add @peyvand/tokens @peyvand/ui @peyvand/iconsچطور مطمئن شوم؟ نسخه‌ها در فایل قفل مخزن ثبت می‌شوند و بیلد بدون خطا رد می‌شود.
گام ۲ — سبک‌ها
ترتیب واردکردن مهم است: اول متغیرها، بعد قلم، بعد پایه‌ی تایپ، بعد اجزا.
app/layout.tsx
import '@peyvand/tokens/css/tokens.css';
import '@peyvand/tokens/css/fonts.css';
import '@peyvand/tokens/css/typography.base.css';
import '@peyvand/ui/styles.css';گام ۳ — تم
اسکریپت کوچکی پیش از رسم صفحه اجرا می‌شود تا تم درست از همان اولین فریم اعمال شود و صفحه سفیدی نزند.
app/layout.tsx
import { themeInitScript } from '@peyvand/ui/theme/init';
<html lang="fa-IR" dir="rtl">
<head>
<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
</head>
</html>گام ۴ — استفاده
page.tsx
import { Button } from '@peyvand/ui';
<Button tone="action" variant="filled">
حمایت می‌کنم
</Button>