🌟 Awesome Svelte & SvelteKit

Svelte와 SvelteKit 개발에 필수적인 라이브러리, 도구, 리소스를 정리한 큐레이션 목록입니다.

📚 Official Resources

| Resource | Description | | -------------------------------------------- | ---------------------------- | | Svelte | 공식 Svelte 프레임워크 | | SvelteKit | 공식 풀스택 프레임워크 | | Svelte REPL | 온라인 Svelte 플레이그라운드 | | Svelte Blog | 공식 블로그 및 릴리스 노트 | | Svelte Discord | 공식 Discord 커뮤니티 | | Svelte Society | 커뮤니티 리소스 허브 |

🎨 UI Component Libraries

Full-Featured UI Kits

| Library | Description | Stars | | --------------------------------------------------- | ---------------------------------------- | ------- | | Skeleton | Tailwind CSS 기반 UI 툴킷, Svelte 5 지원 | ⭐ 5k+ | | shadcn-svelte | Radix 스타일 컴포넌트, Tailwind v4 호환 | ⭐ 5k+ | | Svelte Material UI | Material Design 컴포넌트 40개+ | ⭐ 3k+ | | Flowbite Svelte | Flowbite의 Svelte 포트 | ⭐ 2k+ | | daisyUI | Tailwind CSS 컴포넌트 (Svelte 호환) | ⭐ 33k+ |

Headless UI Libraries

| Library | Description | Best For | | -------------------------------------------------------- | ------------------------------------- | -------------------- | | Melt UI | WAI-ARIA 호환, 완전 커스터마이징 가능 | 접근성 중시 프로젝트 | | Bits UI | Melt UI 기반, 더 직관적인 API | 빠른 개발 | | Svelte Headless UI | Tailwind Headless UI 포트 | Tailwind 사용자 |

Enterprise-Grade

| Library | Description | Use Case | | -------------------------------------------------------------------------- | ------------------------------ | ------------- | | SVAR | 엔터프라이즈급 컴포넌트 스위트 | 대규모 앱 | | Carbon Components Svelte | IBM Carbon Design System | 기업용 앱 | | Svelte UX | 다목적 UI 컴포넌트 | 유틸리티 중심 |

📝 Form Management

| Library | Description | Integration | | ------------------------------------------------------------------- | --------------------------------------- | ----------------- | | Superforms | SvelteKit 전용 폼 라이브러리, 검증 내장 | Zod, Valibot, Yup | | Formsnap | Superforms + shadcn-svelte 통합 | Superforms | | Felte | 경량 폼 관리, 다양한 어댑터 지원 | Zod, Yup, Vest | | svelte-forms-lib | Formik 스타일 폼 라이브러리 | Yup |

🔄 State Management

| Library | Description | Complexity | | ------------------------------------------------------ | -------------------------------- | ----------- | | Svelte Stores | 내장 반응형 스토어 | ⭐ Simple | | Svelte Runes | Svelte 5 신호 기반 반응성 | ⭐ Simple | | nanostores | 프레임워크 독립적 경량 스토어 | ⭐⭐ Medium | | Zustand | React용이지만 Svelte 어댑터 존재 | ⭐⭐ Medium |

🌐 Data Fetching & API

| Library | Description | Use Case | | ------------------------------------------------------------------------------- | ------------------------------ | ----------------- | | SvelteKit Load | 내장 데이터 로딩 | SSR/SSG | | TanStack Query Svelte | 서버 상태 관리 | 캐싱, 재시도 | | tRPC-SvelteKit | End-to-end 타입 안전 API | 풀스택 TypeScript | | Houdini | Svelte 전용 GraphQL 클라이언트 | GraphQL |

🎭 Animation & Motion

| Library | Description | Use Case | | -------------------------------------------------------------- | ---------------------- | ----------------- | | svelte/transition | 내장 트랜지션 | 기본 애니메이션 | | svelte/animate | 내장 애니메이션 | FLIP 애니메이션 | | Motion One | 웹 애니메이션 API 기반 | 고급 애니메이션 | | AutoAnimate | 자동 DOM 애니메이션 | 간편한 적용 | | svelte-motion | Framer Motion 포트 | 선언적 애니메이션 |

🌍 Internationalization (i18n)

| Library | Description | Features | | ------------------------------------------------------------------------ | ----------------------------- | ---------------- | | Paraglide.js | 컴파일 타임 i18n, 트리 쉐이킹 | 최적 번들 사이즈 | | svelte-i18n | 런타임 i18n 라이브러리 | 유연한 설정 | | typesafe-i18n | 타입 안전 i18n | TypeScript 통합 | | Lingui | JS/TS i18n 프레임워크 | 다중 프레임워크 |

🎨 Styling & CSS

| Tool | Description | Use Case | | ------------------------------------------------- | -------------------------- | --------------- | | Tailwind CSS | 유틸리티 퍼스트 CSS | 빠른 스타일링 | | UnoCSS | 즉시 온디맨드 CSS 엔진 | 커스텀 유틸리티 | | Open Props | CSS 커스텀 속성 라이브러리 | 디자인 토큰 | | vanilla-extract | Zero-runtime CSS-in-JS | 타입 안전 CSS |

📊 Data Visualization

| Library | Description | Use Case | | -------------------------------------------------- | ------------------------------- | ------------- | | Layer Cake | Svelte 네이티브 차트 프레임워크 | 반응형 차트 | | Pancake | 선언적 차트 컴포넌트 | 간단한 차트 | | Chart.js + Svelte 래퍼 | 범용 차트 라이브러리 | 다양한 차트 | | D3.js | 저수준 데이터 시각화 | 커스텀 시각화 |

🎮 3D Graphics & WebGL

| Library | Description | Use Case | | ------------------------------------------------ | ---------------------- | ------------- | | Threlte | Three.js의 Svelte 래퍼 | 3D 그래픽 | | Svelte Cubed | Three.js 선언적 래퍼 | 간단한 3D | | Theatre.js | 애니메이션 편집기 | 3D 애니메이션 |

📝 Rich Text & Markdown

| Library | Description | Use Case | | -------------------------------------------- | ------------------------------ | ----------------- | | mdsvex | Svelte용 MDX | Markdown + Svelte | | Carta | Markdown 에디터/뷰어, SSR 지원 | 에디터 | | Tiptap | 헤드리스 리치 텍스트 에디터 | WYSIWYG | | Editor.js | 블록 스타일 에디터 | CMS 에디터 |

📱 Mobile Development

| Tool | Description | Platform | | ------------------------------------------------- | ---------------------------- | -------------- | | Capacitor | 웹 기술로 네이티브 앱 빌드 | iOS, Android | | Svelte Native | NativeScript 기반 | iOS, Android | | Tauri | Rust 기반 데스크톱/모바일 앱 | Cross-platform |

🧪 Testing

| Library | Description | Type | | -------------------------------------------------------------------------------------------- | ------------------------- | --------------- | | Vitest | Vite 네이티브 테스트 러너 | Unit | | @testing-library/svelte | DOM 테스트 유틸리티 | Component | | Playwright | E2E 테스트 자동화 | E2E | | svelte-check | 타입 검사 및 린팅 | Static Analysis |

🛠️ Developer Tools

| Tool | Description | | ---------------------------------------------------------------------------- | ------------------------------ | | Svelte DevTools | 브라우저 개발자 도구 확장 | | prettier-plugin-svelte | Svelte 코드 포매터 | | eslint-plugin-svelte | ESLint 플러그인 | | svelte-preprocess | TypeScript, SCSS, PostCSS 지원 |

🚀 Deployment & Hosting

| Platform | Description | Best For | | ------------------------------------------------- | ------------------------- | ----------- | | Vercel | SvelteKit 네이티브 지원 | 프로덕션 | | Netlify | 자동 배포, Edge Functions | JAMstack | | Cloudflare Pages | 글로벌 CDN, Workers 통합 | 엣지 컴퓨팅 | | Railway | 풀스택 호스팅 | 백엔드 포함 |

📦 Starter Templates

| Template | Description | | ---------------------------------------------------------------- | --------------------- | | Svelte CLI | 공식 SvelteKit 스타터 | | SaaS Starter | SaaS 앱 템플릿 |

🔗 Curated Lists

| Resource | Description | | ---------------------------------------------------------------- | -------------------------------- | | awesome-svelte | 가장 포괄적인 Svelte 리소스 목록 | | Svelte Society Recipes | 코드 패턴 및 레시피 | | Made with Svelte | Svelte로 만든 프로젝트 쇼케이스 |

📈 Learning Resources

| Resource | Type | Level | | ---------------------------------------------------------------- | --------------- | ------------ | | Svelte Tutorial | 공식 튜토리얼 | Beginner | | Joy of Code | 블로그 + 비디오 | Intermediate | | Huntabyte | YouTube 채널 | All Levels | | Svelte Society YouTube | 컨퍼런스 토크 | All Levels |

💡 Svelte 5 (Runes) 관련

Svelte 5에서 도입된 Runes 시스템:

<script> // Svelte 5 Runes 예시 let count = $state(0); let doubled = $derived(count * 2); $effect(() => { console.log(`Count is now ${count}`); }); </script> <button onclick={() => count++}> Clicks: {count}, Doubled: {doubled} </button>

주요 Runes:

• $state - 반응형 상태 선언
• $derived - 파생 상태
• $effect - 사이드 이펙트
• $props - 컴포넌트 props
• $bindable - 양방향 바인딩

🏷️ Related Tags

sveltesveltekitfrontendjavascripttypescriptui-libraryssrspa