Components
CSS and Layout #
# svelte-grid-responsive npm install svelte-grid-responsive
Responsive grid system based on Bootstrap for Svelte
51# svelte-css-vars npm install svelte-css-vars
Ever wanted to have reactive css variables in Svelte? What if I tell you there's a way?
232# @egjs/svelte-infinitegrid npm install @egjs/svelte-infinitegrid
Arrange infinite card elements according to various layout types like masonry
1698# svelte-bricks npm install svelte-bricks
Naive Svelte masonry component without column balancing (ragged columns at the bottom)
66Data Visualisation #
# svelte-datatables-net npm install svelte-datatables-net
svelte-datatables-net is a svelte/sveltekit component that turns data into an interactive HTML table. Inspired by datatables.net.
19# svelte-sortable-list npm install svelte-sortable-list
A list with animated drag-n-drop functionality
118# svelte-data-grid npm install svelte-data-grid
A grid for displaying and editing any amount of data
197# svelte-credit-cards npm install svelte-credit-cards
A component to render a credit card preview - useful for ecommerce.
46# echarts-for-svelte npm install echarts-for-svelte
Baidu Echarts(v3.0 & v4.0) components for Svelte wrapper
25# @okrad/svelte-progressbar npm install @okrad/svelte-progressbar
A multiseries, SVG progressbar component made with Svelte
124# svelte-fusioncharts npm install svelte-fusioncharts
Svelte component for FusionCharts JavaScript charting library
125# svelte-heatmap npm install svelte-heatmap
Customizable version of GitHub's contribution graph
133Design Pattern #
# svelte-eventbus npm install svelte-eventbus
Simple eventbus realization based on internal Svelte's tools only
38# @beyonk/svelte-scrollspy npm install @beyonk/svelte-scrollspy
Scroll Spy component for Svelte
37# svelte-redux-connect npm install svelte-redux-connect
Redux binding to Svelte based on react-redux
17# svelte-inview npm install svelte-inview
A Svelte component that monitors an element enters or leaves the viewport.🔥
606# svelte-viewpoint npm install svelte-viewpoint
Dynamically load a Svelte component with placeholders and preloading
36# @sveltejs/svelte-virtual-list npm install @sveltejs/svelte-virtual-list
A virtual list component for Svelte apps
621# Svelte Virtual List CE npm install svelte-virtual-list-ce
A virtual list component for Svelte apps - Community Edition
19# s-offline npm install s-offline
🔌 Simple Svelte component to detect offline & online changes.
62# svelte-tiny-virtual-list npm install svelte-tiny-virtual-list
A tiny but mighty list virtualization library for Svelte, with zero dependencies - Supports variable heights/widths, sticky items, scrolling to index, and more!
325# @tanstack/svelte-query npm install @tanstack/svelte-query
Powerful asynchronous state management, server-state utilities and data fetching for the web
36426Design System #
# svelte-chota npm install svelte-chota
Svelte UI components based on super lightweight chota CSS framework.
289# svelteify npm install svelteify
Material components library for Svelte using the stylesheet of Vuetify
48# ikun-ui npm install @ikun-ui/core
A Svelte.js based UnoCSS UI library that allows you to make websites
957# carbon-components-svelte npm install carbon-components-svelte
Svelte implementation of the Carbon Design System
2449# melt-ui npm install @melt-ui/svelte
A set of headless, accessible component builders for Svelte.
1605# svelte-toolbox npm install svelte-toolbox
A UI component library for Svelte implementing Google's Material Design specification
75# svelte-mui npm install svelte-mui
A set of Svelte UI components inspired by Google's Material Design
310# @zooplus/zoo-web-components npm install @zooplus/zoo-web-components
Web-components library built with Svelte
45# @rgossiaux/svelte-headlessui npm install @rgossiaux/svelte-headlessui
Unofficial Svelte port of the Headless UI component library
1636# Skeleton npm install @skeletonlabs/skeleton
A fully featured web UI toolkit for Svelte and Tailwind.
3615# flowbite-svelte npm install flowbite-svelte
Official Svelte components built for Flowbite and Tailwind CSS
1448# sthemer npm install sthemer
A lightweight yet powerful solution to support multiple color schemes in your Svelte/SvelteKit application.
24# sterling-svelte npm install @geoffcox/sterling-svelte
A modern, accessible, and lightweight component library for Svelte.
1Developer Experience #
# sveltedoc-parser npm install sveltedoc-parser
Generate a JSON documentation for a Svelte component
88# svelte-dev-helper npm install svelte-dev-helper
Helper for svelte components to ease development
6# svelte-inspector npm install svelte-inspector
Development helper for inspecting and opening Svelte components in your editor
83# html-svelte-parser npm install html-svelte-parser
HTML to Svelte parser that works on both the server and the client.
12# svelte-svg-transform npm install svelte-svg-transform
A tiny component to override SVG file properties
19Display Components #
# svelte-fast-marquee npm install svelte-fast-marquee
A Marquee component for Svelte inspired by react-fast-marquee.
27# svelte-copyright npm install svelte-copyright
A Svelte component to format and display a copyright notice.
14# svelte-ticker npm install svelte-ticker
Simple Svelte component which automatically makes its contents scrollable ticker-style if it's necessary.
17# svelte-pdf npm install svelte-pdf
svelte-pdf provides a component for rendering PDF documents using PDF.js
171# svelte-particles npm install svelte-particles
Official tsParticles Svelte Component - Easily create highly customizable particle animations and use them as animated backgrounds for your website.
19Forms & User Input #
# svelte-number-spinner npm install svelte-number-spinner
A number input field that can be controlled by mouse/touch drag, arrow keys or usual editing.
23# svelte-time-picker npm install svelte-time-picker
Time Picker UI for Svelte, inspired by the MaterialUI React Time Picker
4# svelte-calendar npm install svelte-calendar
A lightweight datepicker with neat animations and a unique UX
521# svelte-tags-input npm install svelte-tags-input
Svelte tags input is a component to use with Svelte and easily enter tags and customize some functions
271# aovi-svelte npm install aovi-svelte
Easy use Aovi to validate forms or values in your components
11# @easylogic/svelte-summernote npm install @easylogic/svelte-summernote
summernote extension for Svelte, a wysiwyg editor
11# @equipmentshare/date-range-input npm install @equipmentshare/date-range-input
A user interface for inputting date ranges
15# svelte-pick-a-place npm install svelte-pick-a-place
Svelte component for position and area selection with Leaflet
53# select-madu npm install select-madu
A replacement for the select menu with searching, multiple selections, async data loading etc.,
49# Simple Svelte Autocomplete npm install simple-svelte-autocomplete
Simple autocomplete / typeahead component for Svelte
420# svelte-range-slider-pips npm install svelte-range-slider-pips
Range Slider Input, with Multi-handle and Pips features
359# @spaceavocado/svelte-form npm install @spaceavocado/svelte-form
Simple Svelte form model handler and input validations
48# @sveltejs/svelte-repl npm install @sveltejs/svelte-repl
The `<Repl>` component used on the Svelte website
275# svelte-file-dropzone npm install svelte-file-dropzone
Svelte component for file upload and file dropzone.
182# svelte-forms-lib npm install svelte-forms-lib
A lightweight library for managing forms in Svelte
584# svelte-easy-crop npm install svelte-easy-crop
A Svelte component to crop images with easy interactions
161# svelte-input-mask npm install svelte-input-mask
Input masking component for Svelte (credit cards, phones, dates, numbers, etc.)
99# svelidation npm install svelidation
Easily customizable library for validation scenarios in svelte components.
51# svelte-fullcalendar npm install svelte-fullcalendar
A Svelte component wrapper around FullCalendar.
192# @svelte-parts/drop-file npm install @svelte-parts/drop-file
Drop files(s) or click to browse file system
48# Event Calendar npm install @event-calendar/core
Full-sized drag & drop event calendar with resource view
551# svelte-multiselect npm install svelte-multiselect
Keyboard-friendly, accessible and highly customizable multi-select component
216# svelecte npm install svelecte
Selectize-like autocomplete select/multiselect/tagging component
351# svelte-currency-input npm install svelte-currency-input
A form input that converts numbers to localized currency formats as you type
19# simple-ui-components-in-svelte npm install simple-ui-components-in-svelte
A set of simple & flexible UI components
9Icons #
# svelte-remixicon npm install svelte-remixicon
An icon library for svelte based on Remix Icon. Consists of more than 2000 icons.
34# svelte-favicon-badge npm install svelte-favicon-badge
A custom component that adds a favicon and a badge that you can use to show for example number of unread messages.
101# svelte-awesome npm install svelte-awesome
Awesome SVG icon component for Svelte JS, built with Font Awesome icons
463# @svelte-parts/icons npm install @svelte-parts/icons
SVG icons from feather icons, maki icons and octicons
48Integration #
# @beyonk/svelte-facebook-customer-chat npm install @beyonk/svelte-facebook-customer-chat
Facebook Messaging Platform - Customer Chat Integration
6# @beyonk/svelte-facebook-pixel npm install @beyonk/svelte-facebook-pixel
A Facebook pixel module for Svelte / Sapper
14# @beyonk/svelte-google-analytics npm install @beyonk/svelte-google-analytics
Google Analytics tracking module for Svelte / Sapper
74# @beyonk/svelte-googlemaps npm install @beyonk/svelte-googlemaps
Google Maps integration for Svelte
70# @beyonk/svelte-trustpilot npm install @beyonk/svelte-trustpilot
Svelte / Vanilla JS Trustpilot Widget with proper SPA support
4# svelte-native npm install svelte-native
Svelte controlling native components via Nativescript
1581# @lottiefiles/svelte-lottie-player npm install @lottiefiles/svelte-lottie-player
Lottie player component for use with Svelte for viewing Lottie animations.
113# Svelte (and SvelteKit) OAuth2 npm install @macfja/svelte-oauth2
Add OAuth2 authorization in Svelte (and SvelteKit, works with SSR)
35# svelte-google-auth npm install svelte-google-auth
Integration with Google Authenticartion for sveltekit
39Internationalization #
# svelte-fluent npm install @nubolab-ffwd/svelte-fluent
Integration of Fluent localization system for Svelte
67# svelte-intl npm install svelte-intl
Internationalize your Svelte apps using format-message and Intl object
49# svelte-translate npm install svelte-translate
Use a dynamic translation service (loaded from xx-XX.json files) and fallback to the text in html tags if no translations are provided.
10# svelte-intl-precompile npm install svelte-intl-precompile
I18n library for Svelte.js that analyzes your keys at build time for max performance and minimal footprint
263# typesafe-i18n npm install typesafe-i18n
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
1850# tolgee/svelte npm install @tolgee/svelte
Web-based localization tool enabling users to translate directly in the Svelte app they develop
198Multimedia #
# svelte-content-loader npm install svelte-content-loader
SVG placeholder components for loading content
154# svelte-image-encoder npm install svelte-image-encoder
An `<ImgEncoder>` component for editing and compressing profile pictures
44# svelte-multitoneimage npm install svelte-multitoneimage
Component to easily generate multitone images
6# Vime npm install @vime/svelte
Focused on making embedding and using media elements for the web simple.
2648# svelte-brick-gallery npm install svelte-brick-gallery
A masonry-like image gallery component for svelte
34# TwicPics Components npm install @twicpics/components
Images and videos components - Context aware resizing and cropping, lazy-loading, LQIP, Next-Gen format, compression, CDN.
45Routers #
# SCR Svelte Client Router npm install svelte-client-router
Svelte Client Router is everything you need and think when routing SPA's. This is The Svelte Router for SPA!
# @bjornlu/svelte-router npm install @bjornlu/svelte-router
An easy-to-use SPA router for Svelte
31# svelte-routing npm install svelte-routing
A declarative Svelte routing library with SSR support
1877# @jamen/svelte-router npm install @jamen/svelte-router
Svelte router using a store and components
7# svelte-router-spa npm install svelte-router-spa
Svelte router specially designed for Single Page Applications (SPA)
489# svelte-navigator npm install svelte-navigator
Simple, declarative routing for single page apps built with Svelte
480# svelte-page-router npm install svelte-page-router
Simple config-based router with DX similar to VueRouter. Works well on the server-side
21# svelte-pathfinder npm install svelte-pathfinder
Tiny, state-based, advanced router for SvelteJS.
120# svelte-hash-router npm install svelte-hash-router
Simple Svelte 3 hash based router with global routes
42# @slick-for/svelte npm install @slick-for/svelte
Manage your views and routing using class decorators and dependency injection
24# @spaceavocado/svelte-router npm install @spaceavocado/svelte-router
Simple Svelte Router for Single Page Applications (SPA)
57# svelte-state-renderer npm install svelte-state-renderer
abstract-state-router renderer for Svelte
35Stores #
# svelte-websocket-store npm install svelte-websocket-store
Svelte store with a websocket backend
270# query-store npm install query-store
Writable store that syncs with the browser's search params
43# svelte-asyncable npm install svelte-asyncable
Asyncable store for Svelte 3 which is store a value as promise.
164# svelte-webext-storage-adapter npm install svelte-webext-storage-adapter
Writable stores for Firefox/Chrome extensions using `chrome.storage
23# svelte-observable npm install svelte-observable
Use observables in Svelte components with ease
63# Undoable store npm install @macfja/svelte-undoable
Memento design pattern (undo/redo) in Svelte
44# Persistent Store npm install @macfja/svelte-persistent-store
A (high order) store that keep its value through pages and reloads
217# Invalidable Store npm install @macfja/svelte-invalidable
A (high order) store that can be requested to update itself
4# Svelte Restate npm install svelte-restate
Immutable store for Svelte with full Typescript support and Redux Devtools integration
21# svelte-fsm npm install svelte-fsm
Tiny, expressive, Svelte-optimized Finite State Machine library
256# Svelte Expirable store npm install @macfja/svelte-expirable
A Svelte store with items that expire
3# KitQL npm install @kitql/all-in
A set of tools, helping you building efficient apps in a fast way.
312# svelte-exstore npm install svelte-exstore
Connect your store to Redux Devtools to enhance your work flow.
0SvelteKit Adapters #
# @sveltejs/adapter-auto npm install @sveltejs/adapter-auto
Automatically chooses adapter for your current environment if possible
16226# @sveltejs/adapter-netlify npm install @sveltejs/adapter-netlify
A SvelteKit adapter that creates a Netlify app. If you're using adapter-auto, you don't need to install this unless you need to specify Netlify-specific options, since it's already included.
16226# @sveltejs/adapter-cloudflare-workers npm install @sveltejs/adapter-cloudflare-workers
SvelteKit adapter that creates a Cloudflare Workers site using a function for dynamic server rendering.
16226# @sveltejs/adapter-cloudflare npm install @sveltejs/adapter-cloudflare
Adapter for building SvelteKit applications on Cloudflare Pages with Workers integration. If you're using adapter-auto, you don't need to install this — it's already included.
16226# @sveltejs/adapter-node npm install @sveltejs/adapter-node
Adapter for SvelteKit apps that generates a standalone Node server.
16226# @sveltejs/adapter-static npm install @sveltejs/adapter-static
Adapter for SvelteKit apps that prerenders your entire site as a collection of static files. If you'd like to prerender only some pages, you will need to use a different adapter together with the prerender option.
16226# @sveltejs/adapter-vercel npm install @sveltejs/adapter-vercel
A SvelteKit adapter that creates a Vercel app.If you're using adapter-auto, you don't need to install this unless you need to specify Vercel-specific options, since it's already included.
16226# svelte-adapter-firebase npm install svelte-adapter-firebase
SvelteKit adapter for Firebase Hosting rewrites to either Cloud Functions or Cloud Run for a Svelte SSR experience
273# architect/sveltekit-adapter npm install @architect/sveltekit-adapter
Adapter for Svelte apps that creates a Begin or Architect app, using a function for dynamic server rendering.
9# svelte-adapter-deno npm install svelte-adapter-deno
SvelteKit adapter that generates a standalone Deno server.
290# Svelte Multi Adapter npm install @macfja/svelte-multi-adapter
An adapter to launch multiple adapter
15# svelte-adapter-azure-swa npm install svelte-adapter-azure-swa
SvelteKit adapter for Azure Static Web Apps.
99# svelte-adapter-appengine npm install svelte-adapter-appengine
SvelteKit adapter for Google Cloud App Engine
51# sveltekit-adapter-browser-extension npm install sveltekit-adapter-browser-extension
Build browser extensions with Svelte
148# @budgetdraw/sveltekit-cloudflare-adapter npm install @budgetdraw/sveltekit-cloudflare-adapter
Alternative SvelteKit adapter for Cloudflare workers. Designed to be standalone and not use wrangler.
7# sveltekit-adapter-wordpress-shortcode npm install sveltekit-adapter-wordpress-shortcode
Build wordpress shortcode plugins with SvelteKit
30# Svelte(kit) adapter for Neutralino npm install @macfja/svelte-adapter-neutralino
A SvelteKit adapter to generate a Neutralinojs application from a SvelteKit project
14# sveltekit-adapter-html-like npm install sveltekit-adapter-html-like
Adapter for SvelteKit apps that prerenders your site as static files for template engines such as PHP, Blade, Handlebars, EJS etc.
16# svelte-adapter-github npm install svelte-adapter-github
Easily deploy your static site to GitHub Pages
41# svelte-adapter-static-digitalocean npm install svelte-adapter-static-digitalocean
SvelteKit adapter for DigitalOcean App Platform static sites.
11# SvelteKit Adapter Bun.js npm install svelte-adapter-bun
SvelteKit adapter that generates a standalone Bun server.
396# SvelteKit Cordova/Capacitor Adapter npm install @ptkdev/sveltekit-cordova-adapter
Adapter for build mobile apps (android/ios) with Svelte Kit and Apache Cordova or Ionic Capacitor
33# SvelteKit Electron Adapter npm install @ptkdev/sveltekit-electron-adapter
Adapter for build desktop apps with Svelte Kit and Electron
47# @carlosv2/adapter-node-ws npm install @carlosv2/adapter-node-ws
Adapter for SvelteKit apps that generates a standalone Node server with support for WebSockets.
15# sveltekit-adapter-iis npm install sveltekit-adapter-iis
An adapter to deploy to IIS Server with iisnode installed
1# sveltekit-html-minifier npm install sveltekit-html-minifier
Sveltekit Adapter to Minify the preload HTML page
3# @jill64/sveltekit-adapter-aws npm install @jill64/sveltekit-adapter-aws
AWS adapter for SvelteKit with multiple architecture
0Testing #
# svelte-carbonbadge npm install svelte-carbonbadge
Svelte badge component for https://www.websitecarbon.com/
0# svelte-fragment-component npm install svelte-fragment-component
Component that renders its children with lifecycle hooks to simplify testing
4# svelte-jester npm install svelte-jester
A Jest transformer for Svelte - compile your components before importing them into tests.
124# jest-transform-svelte npm install jest-transform-svelte
Jest Transformer for Svelte components
35# @testing-library/svelte npm install @testing-library/svelte
Simple and complete DOM testing utilities that encourage good practices
570User Interaction #
# svelte-scrollactive npm install svelte-scrollactive
This is a port of vue-scrollactive to Svelte, a lightweight and simple to use component that highlights menu items as you scroll the page, also scrolling to target section when clicked.
3# svelte-fullscreen npm install svelte-fullscreen
Component that performs fullscreen in DOM Elements
60# svelte-infinite-scroll npm install svelte-infinite-scroll
Infinite Scroll Component to Svelte
254# @beyonk/gdpr-cookie-consent-banner npm install @beyonk/gdpr-cookie-consent-banner
A GDPR compliant cookie consent banner implementation
217# @beyonk/svelte-carousel npm install @beyonk/svelte-carousel
A super lightweight, super simple carousel for Svelte 3
210# @beyonk/svelte-notifications npm install @beyonk/svelte-notifications
Svelte toast notifications that can be used in any JS application
309# svelte-moveable npm install svelte-moveable
Component for moveable, draggable, resizable, scalable, rotatable, and more
8381# svelte-ruler npm install svelte-ruler
A Ruler component that can draw grids and scroll infinitely
268# svelte-simple-modal npm install svelte-simple-modal
A simple, small, and content-agnostic modal for Svelte
412# svelte-compare-image-slider npm install svelte-compare-image-slider
A simple tool for comparing two images.
16# svelte-notifications npm install svelte-notifications
Simple and flexible notifications system
585# svelte-page-progress npm install svelte-page-progress
Svelte Component that tracks a users progress through a page as they scroll
17# svelte-image-compare npm install svelte-image-compare
Simple Svelte component to compare two images using slider.
20# svelte-accessible-dialog npm install svelte-accessible-dialog
An accessible dialog component for Svelte apps
26# svelte-infinite-loading npm install svelte-infinite-loading
An infinite scroll component for Svelte apps
207# @sveltejs/gestures npm install @sveltejs/gestures
Svelte actions for cross-platform gesture detection (work in progress)
86# @sveltejs/gl npm install @sveltejs/gl
A (very experimental) project to bring WebGL to Svelte
607# @sveltejs/svelte-scroller npm install @sveltejs/svelte-scroller
A `<Scroller>` component for Svelte apps
308# @sveltejs/svelte-subdivide npm install @sveltejs/svelte-subdivide
A component for building Blender-style layouts in Svelte apps
129# svelte-grid npm install svelte-grid
A responsive, draggable and resizable grid layout, for Svelte
879# Renderless Svelte npm install renderless-svelte
A collection of renderless/headless components for Svelte
273# svelte-parallax npm install svelte-parallax
A spring-based parallax component for Svelte, based on react-spring/parallax.
128# Svelte Modals npm install svelte-modals
A simple, flexible, zero-dependency modal manager for Svelte.
127# svelte-hover-draw-svg npm install svelte-hover-draw-svg
A lightweight Svelte component to draw SVG on hover.
24# Svelte Scroll Video npm install @macfja/svelte-scroll-video
A component to play a video by scrolling the page
1# @prgm/sveltekit-progress-bar npm install @prgm/sveltekit-progress-bar
A progress bar component that hooks to SvelteKit navigation
7