Show GN: lily-svelte — Svelte 5 컴포넌트 라이브러리 정리

Svelte 5 + Tailwind v4 조합으로 프로젝트를 시작할 때 마주하는 첫 번째 질문은 "컴포넌트 라이브러리를 무엇으로 쓸 것인가"다. 2026년 6월 기준으로 shadcn-svelte, bits-ui, melt-ui 등 강력한 선택지가 이미 자리를 잡았지만, 개발자 levish가 공개한 lily-svelte는 조금 다른 접근을 취한다. 코드 복사 방식, 단일 디자인 톤, CLI 기반 레지스트리. 1차 글을 통해 이 라이브러리가 어떤 결로 만들어졌고 어떤 워크플로를 제공하는지 정리한다.

lily-svelte가 등장한 배경

lily-svelte는 Svelte 5 + Tailwind v4를 사용하는 개발자를 대상으로 한 컴포넌트 라이브러리다. 이름에서 알 수 있듯 Svelte 전용으로 설계되었으며, shadcn처럼 CLI로 컴포넌트 소스를 프로젝트에 직접 복사해 주는 방식이다. 코드를 직접 수정하기 편하다는 점이 가장 큰 장점이다. 디자인은 둥글고 차분한 스타일 하나로 통일되어 있어, 프로젝트 전체에 일관된 톤을 쉽게 적용할 수 있다.

레포지토리는 levish0/lily-svelte로 GitHub에 공개되어 있으며, MIT 라이선스를 채택하고 있다. monorepo 구조로 packages/cli, packages/registry, docs 세 경로가 핵심을 이룬다. CLI 패키지만 npm에 배포되고, 레지스트리 빌드 도구는 내부적으로만 사용된다.

도입 흐름 — 단 두 줄의 명령어

lily-svelte의 도입은 놀라울 만큼 간단하다. SvelteKit + Tailwind v4 프로젝트에서 아래 두 줄이면 충분하다.

• npx lily-svelte@latest init — 한 번만 실행하면 기본 스타일, 유틸, 설정이 추가된다
• npx lily-svelte@latest add button — 필요한 컴포넌트와 그 의존성을 프로젝트로 복사한다

컴포넌트 소스는 $lib/components/ui/* 경로에 복사되며, 사용자가 그대로 수정해서 소유한다. CLI는 packages/cli/src/constants.ts에 설정된 레지스트리 URL에서 컴포넌트를 가져온다. 이 구조는 shadcn-svelte의 그것과 매우 비슷하지만, 단일 레지스트리와 단일 디자인 톤만 제공한다는 점에서 더 좁고 일관된 선택지를 강제한다.

디자인 철학 — 단일 톤, 둥글고 차분한 스타일

lily-svelte의 가장 눈에 띄는 특징은 디자인 톤이 단 하나라는 점이다. README에 명시된 표현 그대로 "a calm, rounded, soft, monochrome style" — 차분하고, 둥글고, 부드럽고, 단색. shadcn이 기본 · 뉴트럴 · 도트 그리드 등 여러 스타일을 노출하는 것과는 다른 결정이다.

이 단일 톤 결정은 양날의 검이다. 사용자는 디자인 선택지를 고민할 필요가 없어 빠르게 시작할 수 있지만, 강한 브랜드 아이덴티티가 필요한 프로젝트에는 그대로 적용하기 어렵다. README 저자도 "아직 초기라 컴포넌트가 많진 않은데"라고 솔직하게 밝히고 있어, 현 시점에서는 텍스트/버튼 같은 핵심부터 쌓아 올리는 단계임을 인정한다.

monorepo 구조와 개발 워크플로

| 경로 | 역할 |

|------|------|

| packages/cli | npm에 배포되는 lily-svelte CLI 패키지 |

| packages/registry | 레지스트리 빌드 도구 (내부 사용) |

| docs | 문서 사이트 + 컴포넌트 소스 / 레지스트리 |

개발 환경은 pnpm + Node 24 기준이다. pnpm install 후 pnpm dev를 실행하면 CLI 감시 모드와 함께 docs 사이트가 localhost:5173에 뜬다. 타입/린트 체크는 pnpm check로 한 번에 검증할 수 있다.

릴리즈 프로세스 — Trusted Publishing 기반

lily-svelte CLI는 Changesets로 버전 관리되며, npm Trusted Publishing(OIDC) 방식으로 발행된다. NPM_TOKEN 시크릿 없이 GitHub Actions에서 바로 발행하는 구조다. 흐름은 다음과 같다.

1. CLI 변경 후 pnpm changeset 실행, 요약 작성 후 main에 머지
2. Publish 워크플로가 자동으로 version packages PR을 연다 (버전 + CHANGELOG 갱신)
3. 그 PR을 머지하는 순간 changeset publish가 실행되어 npm에 CLI가 게시된다

최초 1회는 lily-svelte를 수동으로 게시해서 패키지를 만들고, 그다음 npmjs.com의 Settings → Trusted Publishing에서 저장소 levish0/lily-svelte와 워크플로 release.yml을 신뢰 발행자로 등록하면 된다. 컴포넌트 추가는 CLI 변경이 아니라 배포된 사이트(레지스트리)에 포함되는 방식이라, changeset 없이도 사이트에 반영된다.

Svelte 5 시대의 컴포넌트 라이브러리 선택지

lily-svelte 긱뉴스 토픽(30633번)이 올라온 시점의 GeekNews "함께 보면 좋은 글" 코너에는 비슷한 결의 라이브러리들이 함께 묶여 있다. FlyOnUI는 Tailwind CSS 전용, ui-devtools는 React + TailwindCSS 전용, Tailwind UI는 얼리억세스 상태로 공개되어 있다. Prompt-Kit은 AI 앱 인터페이스에 초점을 맞춘 라이브러리다.

이 중 Svelte 5를 정식 지원하는 선택지는 lily-svelte가 직접 대응하고, shadcn-svelte와 bits-ui가 이미 자리를 잡고 있다. melty도 Svelte 5 호환을 표방한다. lily-svelte가 이 무리에 합류하면서 가져오는 차별점은 단일 톤의 디자인 일관성과 shadcn 패턴의 단순한 복사 워크플로의 결합이다. 사용자가 디자인을 직접 결정해야 하는 자유도는 줄어들지만, 결정 비용도 함께 줄어든다.

2026년 6월 기준 전망

Svelte 5의 runes 시스템이 자리 잡은 2026년 6월 현재, 컴포넌트 라이브러리 생태계는 두 갈래로 정리되고 있다. 첫 번째는 디자인 변형을 폭넓게 제공하는 shadcn-svelte처럼 "선택지를 많이 주는" 방향이고, 두 번째는 lily-svelte처럼 "선택지를 좁혀 일관성을 강제하는" 방향이다. 둘 다 shadcn 패턴의 코드 복사 방식을 따르지만, 후자는 빠른 시작과 통일된 톤을 우선시한다.

lily-svelte가 "초기라 컴포넌트가 많지 않다"고 스스로 밝히고 있긴 하지만, 단일 톤 + CLI 패턴 + Trusted Publishing이라는 운영 자동화 조합은 신생 라이브러리치고 매우 단단한 토대다. SvelteKit + Tailwind v4 환경에서 디자인 결정에 시간을 쓰고 싶지 않다면, npx lily-svelte@latest init 한 줄로 시작해 보는 것이 가장 빠른 경로다. 컴포넌트가 늘어나면 단일 톤의 한계도 자연스럽게 드러나겠지만, 그때 가서 디자인을 분기해도 늦지 않다.

요약

lily-svelte는 Svelte 5 + Tailwind v4를 위한 shadcn-스타일 컴포넌트 라이브러리다. levish0/lily-svelte GitHub 저장소에서 MIT로 공개되어 있으며, CLI는 npm Trusted Publishing으로 자동 배포된다. 단일 톤 디자인, 두 줄의 도입 명령어, monorepo 단일 패키지 npm 배포라는 세 가지 특징이 이 라이브러리의 정체성이다. 2026년 6월 기준으로 초기 단계의 솔직함과 운영 자동화의 견고함을 동시에 갖춘 신생 라이브러리로, SvelteKit 프로젝트의 빠른 시작점이 될 수 있다.