ראו את Lily באפליקציות אמיתיות
שבעה פרויקטי דוגמה מלאים מראים כיצד לקחת את הרכיבים ללא ראש, להוסיף עיצוב ולשחרר אתר אמיתי. בחרו את המסגרת שבה אתם משתמשים.
אפליקציות הדגמה עם CSS מלא וניתוב
HTML JavaScript
דפי HTML רגילים, JavaScript טהור, ללא כלי בנייה. מתאים לכל אחסון סטטי — מושלם לאתרים קטנים ולשיפור הדרגתי.
Svelte + SvelteKit
אפליקציית SvelteKit 3 המשתמשת ב-runes של 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. ניתוב מבוסס קבצים, signals, זיהוי שינויים ללא zone, ורינדור מראש מלא של SSG.
Blazor Web
אפליקציית Blazor Web עם רכיבי Razor. ידידותית לשרת ול-WebAssembly, עם בסיס .NET 10.
Nunjucks + Eleventy
אתר Eleventy המשתמש במאקרואים של Nunjucks. אידיאלי לאתרים סטטיים עתירי תוכן שעדיין רוצים מערכת רכיבים אמיתית.
לכל אפליקציית דוגמה אותה צורה
כדי שהמעבר בין מסגרות ירגיש מוכר, כל אפליקציית דוגמה מספקת:
- נתיב קבלת פנים ב-
/שמציג את הפרויקט. - אינדקס רכיבים ב-
/componentsשמפרט כל רכיב. - עמוד הדגמה לכל רכיב ב-
/components/<component>. - CSS אמיתי — לא אסימוני עיצוב מופשטים — כדי שתוכלו להעתיק סגנונות ישירות.
- ניווט מקלדת וניהול מיקוד שעובדים מהקופסה.
צריכים לראות איך רכיב אחד מעוצב?
פתחו את אפליקציית הדוגמה הרלוונטית, נווטו אל
/components/<name>, והעתיקו את הסימון וה-CSS לפרויקט שלכם. אפליקציות הדוגמה משתמשות בכוונה ב-CSS רגיל (או כמעט רגיל) כדי שתוכלו להתאים אותן לכל מערכת שתעדיפו.
רוצים דווקא ללא ראש?
צרפו כל אפליקציית דוגמה לחבילה ללא הראש המתאימה — הן מפרסמות את אותם רכיבים ללא CSS כלל, מוכנות לאסימוני העיצוב שלכם.