إنشاء المشروع
نفِّذ الأمر التالي لإنشاء مشروع Next.js جديد:
npx create-next-app@latest my-app
تشغيل أداة CLI
شغِّل أداة الإعداد من مجلد المشروع. تكتشف الأداة Next.js تلقائيًا وتُهيئ Tailwind والتبعيات وهيكل المجلدات.
npx sdaia-ui@latest init
إعداد CSS
افتح app/globals.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>;
}
