ดู Lily ในแอปจริง
โครงการตัวอย่างที่ทำเสร็จแล้วเจ็ดโครงการแสดงวิธีนำคอมโพเนนต์ headless มาเพิ่มสไตล์และนำเว็บไซต์จริงขึ้นใช้งาน เลือกเฟรมเวิร์กที่คุณใช้
แอปเดโมพร้อม CSS เต็มรูปแบบและการกำหนดเส้นทาง
HTML JavaScript
หน้า HTML ธรรมดา JavaScript ล้วน ไม่มีเครื่องมือบิลด์ วางบนโฮสต์สแตติกใดก็ได้ — เหมาะกับเว็บไซต์เล็ก ๆ และการพัฒนาแบบค่อยเป็นค่อยไป
Svelte + SvelteKit
แอป SvelteKit 3 ที่ใช้ Svelte 5 runes เส้นทางของคอมโพเนนต์ การกำหนดเส้นทางตามไฟล์ และ 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 ธรรมดา (หรือเกือบธรรมดา) โดยตั้งใจ เพื่อให้คุณปรับให้เข้ากับระบบใดก็ได้ที่คุณชอบ
ต้องการแบบ headless มากกว่าไหม?
จับคู่แอปตัวอย่างใดก็ได้กับแพ็กเกจ headless ที่ตรงกัน — แพ็กเกจเหล่านั้นเผยแพร่คอมโพเนนต์ชุดเดียวกันโดยไม่มี CSS พร้อมสำหรับโทเค็นการออกแบบของคุณเอง