شاهد Lily في تطبيقات حقيقية
تُظهر سبعة مشاريع أمثلة عملية كيف تأخذ مكوّنات headless وتضيف التنسيق وتطلق موقعًا حقيقيًا. اختر إطار العمل الذي تستخدمه.
تطبيقات عرض توضيحي بـ CSS كامل وتوجيه
HTML JavaScript
صفحات HTML عادية وJavaScript خالصة وبلا أدوات بناء. تُوضع على أي استضافة ثابتة — مثالية للمواقع الصغيرة والتحسين التدريجي.
Svelte + SvelteKit
تطبيق SvelteKit 3 يستخدم رونات Svelte 5. مسارات للمكوّنات وتوجيه قائم على الملفات وstorybook منسّق لكل مكوّن.
React + Next.js
تطبيق Next.js 16 يعرض كل مكوّن في سياقه، مع TypeScript في كل مكان وصفحات عرض للأنماط المركّبة.
Vue + Nuxt.js
تطبيق Nuxt 4. <script setup> وواجهة Composition API عبر كل مسار عرض.
Angular + Analog
تطبيق Angular 22 + Analog.js. توجيه قائم على الملفات وإشارات وكشف للتغيير بلا zone وعرض مسبق كامل بـ SSG.
Blazor Web
تطبيق Blazor Web بمكوّنات Razor. يلائم الخادم وWebAssembly، على أساس .NET 10.
Nunjucks + Eleventy
موقع Eleventy يستخدم ماكروات Nunjucks. مثالي للمواقع الثابتة الغنية بالمحتوى التي تريد مع ذلك نظام مكوّنات حقيقيًا.
لكل تطبيق مثال الشكل نفسه
لكي يبدو التنقل بين أطر العمل مألوفًا، يوفّر كل تطبيق مثال ما يلي:
- مسار ترحيب في
/يقدّم المشروع. - فهرس للمكوّنات في
/componentsيسرد كل مكوّن. - صفحة عرض لكل مكوّن في
/components/<component>. - CSS حقيقي — لا رموز تصميم مجردة — لتنقل الأنماط مباشرة.
- تنقل بلوحة المفاتيح وإدارة للتركيز يعملان من أول لحظة.
تحتاج إلى معرفة كيف يُنسَّق مكوّن واحد؟
افتح تطبيق المثال المعني، وانتقل إلى /components/<name>، وانسخ الترميز وCSS إلى مشروعك. تستخدم تطبيقات الأمثلة عمدًا CSS عاديًا (أو شبه عادي) لتتمكن من تكييفها مع أي نظام تفضّله.
تريد headless بدلًا من ذلك؟
اقرن أي تطبيق مثال بحزمة headless المقابلة له — فهي تنشر المكوّنات نفسها بلا أي CSS، جاهزة لرموز التصميم الخاصة بك.