إنشاء المشروع
أنشئ مشروع React + Vite جديدًا ثم انتقل إلى مجلده:
npm create vite@latest my-app -- --template react-ts cd my-app && npm install
تشغيل أداة CLI
شغِّل أداة الإعداد من مجلد المشروع. تكتشف الأداة Vite تلقائيًا وتُهيئ Tailwind والتبعيات وهيكل المجلدات.
npx sdaia-ui@latest init
إعداد CSS
افتح src/index.css وأضف السطرين التاليين بعد @import "tailwindcss";:
@import "tailwindcss";
@import "@sdaia-ds/tokens/css";إضافة مكوّن
استخدم أداة CLI لنسخ أي مكوّن مباشرةً إلى مشروعك:
npx sdaia-ui@latest add button
الاستيراد والاستخدام
استورد المكوّن من مجلد المكوّنات المحلي واستخدمه في تطبيقك:
import { Button } from '@/components/button';
export default function App() {
return <Button>Click me</Button>;
}
