Lily کو حقیقی ایپس میں دیکھیں
سات عملی مثالی منصوبے دکھاتے ہیں کہ headless کمپوننٹس کو کیسے لیں، سٹائلنگ شامل کریں، اور ایک حقیقی ویب سائٹ جاری کریں۔ وہ فریم ورک چنیں جو آپ استعمال کرتے ہیں۔
مکمل CSS اور روٹنگ والی ڈیمو ایپس
HTML JavaScript
سادہ HTML صفحات، خالص JavaScript، کوئی بلڈ ٹول نہیں۔ کسی بھی سٹیٹک ہوسٹ پر رکھ دیں — چھوٹی سائٹس اور بتدریج بہتری کے لیے بہترین۔
Svelte + SvelteKit
Svelte 5 رُونز استعمال کرنے والی SvelteKit 3 ایپ۔ کمپوننٹ روٹس، فائل پر مبنی روٹنگ، اور ہر کمپوننٹ کا سٹائل شدہ سٹوری بک۔
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
Razor کمپوننٹس والی Blazor Web ایپ۔ سرور اور WebAssembly دونوں کے لیے موزوں، .NET 10 کی بنیاد کے ساتھ۔
Nunjucks + Eleventy
Nunjucks میکروز استعمال کرنے والی Eleventy سائٹ۔ مواد سے بھرپور سٹیٹک سائٹس کے لیے مثالی جو پھر بھی ایک حقیقی کمپوننٹ سسٹم چاہتی ہیں۔
ہر مثالی ایپ کی ایک ہی ساخت ہے
فریم ورکس کے درمیان آنا جانا مانوس لگے، اس کے لیے ہر مثالی ایپ یہ فراہم کرتی ہے:
/پر ایک خوش آمدید روٹ جو منصوبے کا تعارف کراتا ہے۔/componentsپر کمپوننٹس کا انڈیکس جو ہر کمپوننٹ کی فہرست دیتا ہے۔/components/<component>پر ہر کمپوننٹ کے لیے ایک ڈیمو صفحہ۔- حقیقی CSS — تجریدی ڈیزائن ٹوکن نہیں — تاکہ آپ سٹائلز براہِ راست نقل کر سکیں۔
- پہلے ہی لمحے سے کام کرنے والی کی بورڈ نیویگیشن اور فوکس کا انتظام۔
دیکھنا چاہتے ہیں کہ ایک کمپوننٹ کیسے سٹائل ہوا ہے؟
متعلقہ مثالی ایپ کھولیں، /components/<name> پر جائیں، اور مارک اپ اور CSS اپنے منصوبے میں نقل کر لیں۔ مثالی ایپس دانستہ سادہ (یا تقریباً سادہ) CSS استعمال کرتی ہیں تاکہ آپ انہیں اپنی پسند کے کسی بھی نظام میں ڈھال سکیں۔
اس کے بجائے headless چاہیے؟
کسی بھی مثالی ایپ کو اس کے متعلقہ headless پیکیج کے ساتھ ملائیں — وہ انہی کمپوننٹس کو بغیر کسی CSS کے شائع کرتے ہیں، آپ کے اپنے ڈیزائن ٹوکنز کے لیے تیار۔