실제 앱에서 Lily 보기
일곱 개의 동작하는 예제 프로젝트가 헤드리스 컴포넌트에 스타일을 얹어 실제 웹사이트로 배포하는 과정을 보여 줍니다. 사용하는 프레임워크를 고르세요.
전체 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 앱. 파일 기반 라우팅, 시그널, 존리스 변경 감지, 완전한 SSG 프리렌더링.
Blazor Web
Razor 컴포넌트를 쓰는 Blazor Web 앱. 서버와 WebAssembly 모두에 알맞고 .NET 10을 기준으로 합니다.
Nunjucks + Eleventy
Nunjucks 매크로를 쓰는 Eleventy 사이트. 콘텐츠가 많은 정적 사이트이면서도 제대로 된 컴포넌트 시스템을 원할 때 이상적입니다.
모든 예제 앱은 같은 구성입니다
프레임워크를 옮겨 다녀도 낯설지 않도록, 모든 예제 앱은 다음을 제공합니다.
- 프로젝트를 소개하는
/의 환영 라우트. - 모든 컴포넌트를 나열하는
/components의 컴포넌트 색인. - 컴포넌트별 데모 페이지
/components/<component>. - 추상적인 디자인 토큰이 아닌 실제 CSS. 스타일을 그대로 가져다 쓸 수 있습니다.
- 처음부터 동작하는 키보드 탐색과 포커스 관리.
컴포넌트 하나의 스타일이 궁금하다면?
해당 예제 앱을 열고 /components/<name>로 이동해서 마크업과 CSS를 프로젝트에 복사하세요.
예제 앱은 일부러 순수 CSS(또는 그에 가까운 것)를 사용하므로 원하는 어떤 시스템에도 맞출 수 있습니다.
헤드리스를 원하시나요?
어떤 예제 앱이든 대응하는 헤드리스 패키지와 함께 쓸 수 있습니다. 그쪽은 같은 컴포넌트를 CSS 없이 배포하므로, 여러분의 디자인 토큰을 바로 적용할 수 있습니다.