originui
1.0.0
Origin UI هي مجموعة واسعة من مكونات النسخ واللصق لبناء تطبيق UIS بسرعة. ويشمل مئات المكونات ويتم تحديثه باستمرار مع أشياء جديدة.
DEMO → https://originui.com
Origin UI SPOCTLINES DEVELONCE من خلال توفير:
تم تصميم Origin UI لتكامل بسلاسة مع مشاريع Next.js ، ولكن المكونات متوافقة أيضًا مع أي مشروع يعتمد على رد الفعل. تتبع المكونات اتفاقيات Shadcn ، لذلك سوف يشعرون بالمعرفة لأي شخص استخدم Shadcn من قبل.
1. قم بإعداد الملفات المطلوبة:
.tsx من مجلد Origin UI's components/ui إلى مجلد components/ui في مشروعك.utils.ts من مجلد lib الخاص بـ Origin UI إلى مجلد lib لمشروعك.ملاحظة: إذا كنت تستخدم Shadcn ، فمن المحتمل أن يكون لديك بالفعل هذه الملفات - ومع ذلك ، أوصي باستخدام مكوناتنا على Shadcn لتجربة تصميم متسقة.
2. أضف متغيرات CSS التالية إلى ورقة الأنماط الخاصة بك (لا تحتاج إلى الكتابة فوقها إذا كان لديك بالفعل):
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 100%;
--border: 240 5.9% 90%;
--input: 240 4.9% 83.9%;
--ring: 240 5% 64.9%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 5.9% 10%;
--muted-foreground: 240 4.4% 58%;
--accent: 240 5.9% 10%;
--accent-foreground: 0 0% 98%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 100%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 3.8% 46.1%;
}
}
3.
extend: {
fontFamily: {
sans: ["var(--font-sans)"],
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
},
},
بعد الانتهاء من هذه الخطوات ، يمكنك نسخ واستخدام المكونات في مشروعك. لاحظ أن بعض المكونات (على سبيل المثال ، مدخلات الأرقام ، ملتزمات التاريخ ، ملتزمات الوقت ، مدخلات رقم الهاتف) قد تتطلب مكتبات إضافية - راجع تعليقات الرمز الموجود في الجزء العلوي من كل ملف للحصول على متطلبات محددة.
نرحب بالمساهمات في Origin UI! يرجى قراءة إرشاداتنا المساهمة حول كيفية تقديم التحسينات والمكونات الجديدة.
لا تتردد في استخدام هذه المكونات في المشاريع الشخصية والتجارية. ومع ذلك ، في حين أن البرامج التعليمية والعروض التوضيحية متاحة لاستخدامك كما هو ، لا يمكن إعادة توزيعها أو إعادة بيعها. دعونا نبقي الأمور عادلة ونحترم عمل بعضنا البعض.
إذا كان لديك أي أسئلة أو تريد فقط أن تقول مرحبًا ، فلا تتردد في التواصل معنا على Xpacovitiello & davidepacilio.
هذا المشروع هو عمل مستمر ، ونحن نعمل باستمرار على تحسين وتوسيع هذه المجموعة. نود أن نسمع ملاحظاتك أو رؤية مساهماتك مع تطور المشروع!
