Awesome Svelte

A curated list of awesome Svelte ecosystem tools, libraries, resources, and everything in between.

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Contents

• Frameworks
• UI Libraries
• State Management
• Forms
• Animation
• Testing
• Data Visualization
• Dev Tools
• Routing
• Deployment
• Auth
• CMS Integration
• Icons
• Utilities
• Headless / Unstyled Components
• Internationalization
• Markdown / Content
• Real-time / WebSockets
• SEO
• Learning Resources
• Community
• Contributing

---

Frameworks

Full-stack and meta-frameworks built on Svelte.

• SvelteKit - The official full-stack framework for Svelte. Server-side rendering, routing, and deployment adapters out of the box.
• Astro + Svelte - Use Svelte components inside Astro for content-driven sites with islands architecture.
• Elder.js - An SEO-first Svelte framework designed for large-scale, content-heavy sites.
• Routify - File-based routing for Svelte with SSR support and a lightweight footprint.
• Svelte Native - Build mobile apps with Svelte and NativeScript.
• Tauri + Svelte - Build desktop apps with Svelte frontend and Rust backend.
• Capacitor + Svelte - Wrap Svelte apps as native iOS/Android apps.

UI Libraries

Component libraries and design systems.

• Skeleton - Adaptive UI toolkit for Svelte + Tailwind CSS. Themes, components, and utilities.
• shadcn-svelte - Port of shadcn/ui for Svelte. Copy-paste components built on Bits UI and Tailwind.
• DaisyUI - Tailwind CSS component library that works seamlessly with Svelte projects.
• Flowbite Svelte - UI components built with Tailwind CSS for Svelte, based on the Flowbite design system.
• Melt UI - Headless, accessible component builders for Svelte. The foundation behind shadcn-svelte.
• Bits UI - Headless component library for Svelte built on Melt UI. Unstyled, accessible primitives.
• Carbon Components Svelte - IBM Carbon Design System implemented in Svelte.
• Svelte Material UI (SMUI) - Material Design components for Svelte.
• Attractions - A pretty, accessible UI kit for Svelte.
• Grapes UI - Minimal, accessible Svelte components.
• AgnosUI - Framework-agnostic headless widgets with Svelte implementation.
• Svelte Headless UI - Unofficial Svelte port of Headless UI components.
• Sveltestrap - Bootstrap 5 components for Svelte.

State Management

State handling beyond Svelte's built-in stores.

• Svelte Stores - Built-in reactive stores: writable, readable, derived. Usually all you need.
• TanStack Query (Svelte) - Powerful data fetching, caching, and synchronization for server state.
• Svelte Runes - Svelte 5's new reactivity primitives: $state, $derived, $effect.
• nanostores - Tiny state manager (334 bytes) with Svelte integration. Framework-agnostic.
• svelte-exstore - Extended stores with actions and selectors.
• Zustand Svelte - Zustand-style state management adapted for Svelte.
• XState Svelte - Finite state machines and statecharts with official Svelte bindings.

Forms

Form libraries, validation, and handling.

• Superforms - Full-featured form library for SvelteKit. Server validation, client validation, multi-step forms, nested data.
• Formsnap - Accessible form components for Svelte, built on Superforms and Bits UI.
• Felte - Extensible form library for Svelte with first-class validation support (Yup, Zod, Vest).
• svelte-forms-lib - Formik-inspired forms for Svelte.
• Sveltekit Superforms + Zod - Type-safe server+client validation using Zod schemas.

Animation

Motion, transitions, and 3D.

• svelte/motion - Built-in tweened and spring stores for smooth animations.
• svelte/transition - Built-in transition directives: fade, fly, slide, scale, draw, crossfade.
• Auto-Animate - Zero-config animation library. Add one attribute and elements animate automatically.
• Threlte - 3D rendering for Svelte using Three.js. Declarative scene graphs with Svelte components.
• svelte-motion - Framer Motion for Svelte. Spring animations, gestures, layout animations.
• Svelte Lottie Player - Lottie animations in Svelte components.
• svelte-typewriter - Typewriter effect component for Svelte.
• svelte-inview - Intersection Observer action for triggering animations on scroll.

Testing

Test frameworks and utilities.

• Vitest - Vite-native unit testing framework. Fast, ESM-first, works perfectly with SvelteKit.
• Playwright - End-to-end testing. SvelteKit's recommended E2E framework.
• Testing Library Svelte - DOM testing utilities following the Testing Library philosophy.
• svelte-check - Type checking and diagnostics for Svelte files.
• Cypress + Svelte - Component and E2E testing with Cypress.
• MSW (Mock Service Worker) - API mocking for tests. Works with any Svelte testing setup.
• Storybook for Svelte - Develop and test UI components in isolation.

Data Visualization

Charting and data visualization libraries.

• Layercake - Graphics framework for Svelte. SVG, Canvas, HTML, and WebGL layers. Highly composable.
• Pancake - Responsive charts for Svelte. Lightweight and SSR-friendly.
• Chart.js + Svelte - Chart.js wrapper for Svelte with reactive updates.
• D3 + Svelte - Use D3.js calculations with Svelte's DOM handling for powerful visualizations.
• svelte-frappe-charts - Svelte wrapper for Frappe Charts.
• Apache ECharts + Svelte - ECharts integration for Svelte.
• Vega-Lite + Svelte - Grammar of interactive graphics, renderable in Svelte components.

Dev Tools

Developer experience and tooling.

• svelte-devtools - Browser extension to inspect Svelte component hierarchy, state, and events.
• svelte-check - CLI diagnostics: type errors, accessibility warnings, unused CSS.
• svelte-inspector - Click any element in the browser to jump to its Svelte source code.
• Svelte Language Server - IntelliSense, go-to-definition, and diagnostics for VS Code and other editors.
• Vite Plugin Svelte - First-class Svelte support in Vite with HMR.
• svelte-preprocess - Preprocessing for TypeScript, SCSS, PostCSS, Pug, and more in Svelte files.
• Svelte REPL - Official online playground for prototyping Svelte components.
• unplugin-svelte-components - Auto-import Svelte components on demand.

Routing

Navigation and routing solutions.

• SvelteKit Routing - File-based routing built into SvelteKit with layouts, groups, and API routes.
• TinyPages - Minimalist router for Svelte SPAs.
• svelte-routing - Declarative routing for Svelte SPAs with SSR support.
• svelte-navigator - Accessible routing for Svelte, inspired by React Router.
• page.js + Svelte - Micro client-side router that integrates well with Svelte.

Deployment

Adapters and deployment targets.

• adapter-auto - SvelteKit automatically selects the right adapter for your deploy target.
• adapter-node - Deploy SvelteKit as a Node.js server (Express, Fastify, etc.).
• adapter-static - Pre-render SvelteKit as a fully static site.
• adapter-vercel - Deploy to Vercel with edge functions and ISR support.
• adapter-netlify - Deploy to Netlify with serverless functions.
• adapter-cloudflare - Deploy to Cloudflare Pages/Workers.
• adapter-bun - Run SvelteKit on Bun runtime.
• Docker + SvelteKit - Containerize with adapter-node for any cloud platform.

Auth

Authentication and authorization.

• Lucia - Lightweight auth library. Session-based, works with any database. First-class SvelteKit support.
• Auth.js (SvelteKit) - OAuth / credentials auth for SvelteKit. Formerly NextAuth, now framework-agnostic.
• Supabase Auth + SvelteKit - Full auth with Supabase: magic links, OAuth, row-level security.
• Firebase Auth + Svelte - Google, email, phone auth via Firebase SDK.
• Clerk + Svelte - Drop-in auth UI with user management, organizations, and webhooks.
• SuperTokens - Open-source auth with session management, works with any Svelte setup.

CMS Integration

Content management system integrations.

• Sanity + Svelte - Real-time structured content with GROQ queries and visual editing.
• Strapi + SvelteKit - Open-source headless CMS with REST and GraphQL APIs.
• Contentful + SvelteKit - Content infrastructure with GraphQL and REST APIs.
• Directus + Svelte - Open-source data platform with auto-generated REST/GraphQL APIs.
• Prismic + Svelte - Headless website builder with slice-based content modeling.
• Storyblok + Svelte - Visual editor CMS with real-time preview.
• MDsveX - Markdown preprocessor for Svelte. Use Svelte components inside markdown files.

Icons

Icon libraries with Svelte components.

• Lucide Svelte - Beautiful, consistent open-source icons. 1400+ icons as Svelte components.
• Phosphor Svelte - Flexible icon family with 6 weights. 1200+ icons.
• Heroicons Svelte - Tailwind CSS Heroicons as Svelte components. Outline and solid variants.
• svelte-icons-pack - 10,000+ icons from multiple packs (Font Awesome, Material, Bootstrap, etc.).
• Iconify for Svelte - Universal icon framework. Access 200,000+ icons from 100+ icon sets.
• Tabler Icons Svelte - 4,000+ free MIT-licensed SVG icons.
• svelte-feather-icons - Feather icons as Svelte components.

Utilities

Helpful tools and utilities.

• svelte-persisted-store - Svelte stores backed by localStorage/sessionStorage.
• svelte-headless-table - Headless, framework-agnostic table builder for Svelte.
• svelte-french-toast - Lightweight toast notifications. Smoke-hot by default.
• svelte-sonner - Toast component for Svelte, port of Sonner.
• sveltekit-flash-message - Flash messages for SvelteKit with cookie-based transport.
• svelte-dnd-action - Declarative drag-and-drop for Svelte.
• svelte-copy - Click-to-copy action for Svelte.
• sveltekit-search-params - Reactive URL search parameters as Svelte stores.
• svelte-meta-tags - SEO meta tags manager for SvelteKit.
• date-picker-svelte - Accessible date and time picker.
• svelte-multiselect - Searchable, keyboard-accessible multi-select dropdown.

Headless / Unstyled Components

Accessible, unstyled building blocks.

• Melt UI - Builder-based headless UI. Accordion, combobox, dialog, popover, tabs, and more.
• Bits UI - Headless components built on Melt UI. The foundation for shadcn-svelte.
• Svelte Headless UI - Svelte port of Headless UI: menu, listbox, switch, disclosure, dialog.
• Grail UI - Headless UI primitives with accessibility built in.

Internationalization

i18n and localization.

• Paraglide.js + SvelteKit - Compiled i18n with tree-shaking. Only ships translations that are used.
• svelte-i18n - Internationalization library for Svelte using stores.
• typesafe-i18n - Type-safe i18n with autocompletion and compile-time checks.
• sveltekit-i18n - i18n for SvelteKit with lazy-loaded translations.

Markdown / Content

Markdown processing and content tools.

• MDsveX - Use Svelte components in markdown. Frontmatter, layouts, plugins.
• mdsvex + rehype/remark - Extend MDsveX with the unified ecosystem for syntax highlighting, math, TOC, etc.
• Shiki + Svelte - Beautiful syntax highlighting powered by VS Code's TextMate grammars.
• svelte-markdown - Render markdown as Svelte components with customizable renderers.

Real-time / WebSockets

Real-time data and communication.

• Supabase Realtime + Svelte - Real-time database subscriptions, presence, and broadcast.
• Socket.IO + Svelte - WebSocket library with fallbacks, rooms, and namespaces.
• PartyKit + Svelte - Real-time multiplayer infrastructure. Rooms, cursors, collaborative editing.
• Ably + Svelte - Scalable real-time messaging infrastructure.
• Liveblocks + Svelte - Real-time collaboration: presence, storage, comments.

SEO

Search engine optimization tools.

• svelte-meta-tags - Manage meta tags, Open Graph, Twitter cards, JSON-LD.
• @sveltejs/enhanced-img - Optimized images in SvelteKit with automatic srcset and lazy loading.
• SvelteKit Sitemap - Auto-generate sitemaps from SvelteKit routes.
• svelte-seo - SEO component for setting document head metadata.

Learning Resources

Tutorials, courses, and documentation.

• Svelte Tutorial - Official interactive tutorial covering basics to advanced topics.
• SvelteKit Docs - Comprehensive official documentation for SvelteKit.
• Svelte Society - Community-driven recipes, components, and events.
• Joy of Code - High-quality Svelte tutorials and blog posts.
• Huntabyte - YouTube channel with SvelteKit tutorials and component building.
• Svelte Sirens - Svelte community events, talks, and content.
• Svelte Summit - The official Svelte conference. Recorded talks available online.

Community

Places to connect with other Svelte developers.

• Svelte Discord - Official Svelte Discord server.
• r/sveltejs - Svelte subreddit.
• Svelte Society GitHub - Community organization for Svelte resources.
• Svelte Hack - Annual Svelte hackathon.

---

Contributing

Contributions welcome. Please read the guidelines below before submitting.

Guidelines

1. Search existing entries before adding to avoid duplicates.
2. One item per pull request makes reviews easier.
3. Format: [Name](URL) - Description. Keep descriptions concise (one sentence).
4. Categories: Add items to the most appropriate existing category. Propose new categories in an issue first.
5. Quality bar: Tools should be actively maintained, documented, and useful to the Svelte community.
6. No self-promotion spam: Your project is welcome if it meets the quality bar, but bulk-adding your own projects is not.

Adding an Entry

1. Fork this repository.
2. Add your entry in the correct category, maintaining alphabetical order.
3. Submit a pull request with a brief description of why the tool is awesome.

---

This list is maintained by the community. Star it if you find it useful.