kilah ui

كيلاهوي | مجاني ومفتوح المصدر | قم ببناء موقع الويب الخاص بك بشكل أسرع مع القدرة على التكيف السلس

Kilahui مستوحى من hyperui.dev . منذ اكتشاف ذلك ، أدهشني مدى روعة الفكرة وشرعت في إنشاء نسختي الخاصة.

هذا المشروع مفتوح المصدر ، لذلك لا تتردد في المساهمة بمكوناتك! يمكنك قراءة الدليل في CONTRIBUTING.md .

ابدء

يستخدم Kilahui PNPM لإدارة التبعية. للبدء ، قم بالتشغيل:

pnpm install
pnpm run dev

يعمل المشروع على Next.js v15 ، وهيكل الدليل كما يلي:

 public/
    components/       # Codebase for each component
src/
    app/
        (markdown-pages)/  # Pages that use MDX
        [category]/        # Route for each component
        api/               # Route handler for search
        components/        # Components used by the website
        constants/         # Constants
        context/           # Contexts
        hooks/             # Custom hooks
        lib/               # Modules

ألوان مخصصة

أحد الأشياء الأولى التي حددتها للقيام بها بشكل مختلف هي استخدام الألوان المخصصة . لماذا؟ غالبًا ما وجدت نفسي أعدل الألوان من مكتبات مكون TailwindCSS لتناسب موضوعي. لذلك ، قررت أن Kilahui سيقدم ألوانًا قابلة للتخصيص لتعزيز التجربة.

مستوحاة من Shadcn ونهجها في إعلان الألوان ، يتضمن Kilahui أيضًا دعمًا سهلًا للوضع الظلام. فيما يلي اللوحة الافتراضية المستخدمة:

 colors : {
  background : "#ffffff" ,
  foreground : "#d82116" ,
  card : "#ffffff" ,
  "card-foreground" : "#d82116" ,
  primary : "#846bce" ,
  "primary-foreground" : "#e9f1f9" ,
  secondary : "#e0e9f5" ,
  "secondary-foreground" : "#2d3446" ,
  accent : "#e0e9f5" ,
  "accent-foreground" : "#2d3446" ,
  danger : "#e5193e" ,
  "danger-foreground" : "#e9f1f9" ,
  border : "#d1dce8" ,
  input : "#d1dce8" ,
} ,

يقدم كل مكون لوحات مختلفة لإظهار التنوع.

ملعب

إليكم نظرة خاطفة على ملعب Kilahui :

على اليسار ، يمكنك تحديد نقاط التوقف ، وعلى اليمين ، يمكنك التبديل بين العرض التوضيحي والرمز. بالإضافة إلى ذلك ، يمكنك التبديل بين HTML/JSX وعرض المكون إما المكون أو تكوين Tailwind الذي يستخدمه هذا المكون.

يوجد شريط بحث للعثور على مكونات بالكلمات الرئيسية - على الرغم من أنني أعترف بأن مكونات تسمية لم تكن أقوى نقطة لي؟

الميزات القادمة

• دعم وضع الظلام/الضوء : ليس فقط لموقع الويب ، ولكن لكل مكون على حدة.
• ميزة مكون الطلب : يمكن للمستخدمين طلب مكونات بناءً على أفكار التصميم.
• التحليلات : التخطيط لدمج أدوات مثل Posthog للتحليلات.

---

شكرا للقراءة! إذا كنت تستمتع بالمشروع ، فيرجى التفكير في ترك نجم لدعم تطويره المستمر.

السلام!

---