Lily را در برنامه‌های واقعی ببینید
هفت پروژهٔ نمونهٔ کامل نشان می‌دهند مؤلفه‌های بدون‌سر را چگونه بگیرید، سبک‌دهی روی آن‌ها بنشانید و یک وب‌سایت واقعی منتشر کنید. چارچوبی را که به کار می‌برید انتخاب کنید.
برنامه‌های نمایشی با 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 ساده (یا تقریباً ساده) استفاده می‌کنند تا بتوانید آن‌ها را با هر سامانه‌ای که ترجیح می‌دهید تطبیق دهید.
به‌جای آن بدون‌سر می‌خواهید؟
هر برنامهٔ نمونه را با بستهٔ بدون‌سر متناظرش جفت کنید — آن‌ها همان مؤلفه‌ها را بدون هیچ CSS منتشر می‌کنند، آمادهٔ توکن‌های طراحی خودتان.