বাস্তব অ্যাপে 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 ছাড়াই প্রকাশ করে, আপনার নিজের ডিজাইন টোকেনের জন্য প্রস্তুত।