Components
CSS and Layout #
# svelte-grid-responsive npm install svelte-grid-responsive
Responsive grid system based on Bootstrap for Svelte
# 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?
# @egjs/svelte-infinitegrid npm install @egjs/svelte-infinitegrid
Arrange infinite card elements according to various layout types like masonry
# svelte-bricks npm install svelte-bricks
Naive Svelte masonry component without column balancing (ragged columns at the bottom)
Data 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.
# svelte-sortable-list npm install svelte-sortable-list
A list with animated drag-n-drop functionality
# svelte-data-grid npm install svelte-data-grid
A grid for displaying and editing any amount of data
# svelte-credit-cards npm install svelte-credit-cards
A component to render a credit card preview - useful for ecommerce.
# echarts-for-svelte npm install echarts-for-svelte
Baidu Echarts(v3.0 & v4.0) components for Svelte wrapper
# @okrad/svelte-progressbar npm install @okrad/svelte-progressbar
A multiseries, SVG progressbar component made with Svelte
# svelte-fusioncharts npm install svelte-fusioncharts
Svelte component for FusionCharts JavaScript charting library
# svelte-heatmap npm install svelte-heatmap
Customizable version of GitHub's contribution graph
Design Pattern #
# svelte-eventbus npm install svelte-eventbus
Simple eventbus realization based on internal Svelte's tools only
# @beyonk/svelte-scrollspy npm install @beyonk/svelte-scrollspy
Scroll Spy component for Svelte
# svelte-redux-connect npm install svelte-redux-connect
Redux binding to Svelte based on react-redux
# svelte-inview npm install svelte-inview
A Svelte component that monitors an element enters or leaves the viewport.🔥
# svelte-viewpoint npm install svelte-viewpoint
Dynamically load a Svelte component with placeholders and preloading
# @sveltejs/svelte-virtual-list npm install @sveltejs/svelte-virtual-list
A virtual list component for Svelte apps
# Svelte Virtual List CE npm install svelte-virtual-list-ce
A virtual list component for Svelte apps - Community Edition
# 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!
# @tanstack/svelte-query npm install @tanstack/svelte-query
Powerful asynchronous state management, server-state utilities and data fetching for the web
Design System #
# svelte-chota npm install svelte-chota
Svelte UI components based on super lightweight chota CSS framework.
# svelteify npm install svelteify
Material components library for Svelte using the stylesheet of Vuetify
# ikun-ui npm install @ikun-ui/core
A Svelte.js based UnoCSS UI library that allows you to make websites
# carbon-components-svelte npm install carbon-components-svelte
Svelte implementation of the Carbon Design System
# svelte-toolbox npm install svelte-toolbox
A UI component library for Svelte implementing Google's Material Design specification
# svelte-mui npm install svelte-mui
A set of Svelte UI components inspired by Google's Material Design
# @zooplus/zoo-web-components npm install @zooplus/zoo-web-components
Web-components library built with Svelte
# @rgossiaux/svelte-headlessui npm install @rgossiaux/svelte-headlessui
Unofficial Svelte port of the Headless UI component library
# Skeleton npm install @skeletonlabs/skeleton
A fully featured web UI toolkit for Svelte and Tailwind.
# flowbite-svelte npm install flowbite-svelte
Official Svelte components built for Flowbite and Tailwind CSS
# sthemer npm install sthemer
A lightweight yet powerful solution to support multiple color schemes in your Svelte/SvelteKit application.
# sterling-svelte npm install @geoffcox/sterling-svelte
A modern, accessible, and lightweight component library for Svelte.
Developer Experience #
# sveltedoc-parser npm install sveltedoc-parser
Generate a JSON documentation for a Svelte component
# svelte-dev-helper npm install svelte-dev-helper
Helper for svelte components to ease development
# svelte-inspector npm install svelte-inspector
Development helper for inspecting and opening Svelte components in your editor
# html-svelte-parser npm install html-svelte-parser
HTML to Svelte parser that works on both the server and the client.
# svelte-svg-transform npm install svelte-svg-transform
A tiny component to override SVG file properties
Display Components #
# svelte-fast-marquee npm install svelte-fast-marquee
A Marquee component for Svelte inspired by react-fast-marquee.
# svelte-copyright npm install svelte-copyright
A Svelte component to format and display a copyright notice.
# svelte-ticker npm install svelte-ticker
Simple Svelte component which automatically makes its contents scrollable ticker-style if it's necessary.
# svelte-pdf npm install svelte-pdf
svelte-pdf provides a component for rendering PDF documents using PDF.js
# 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.
Forms & 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.
# svelte-time-picker npm install svelte-time-picker
Time Picker UI for Svelte, inspired by the MaterialUI React Time Picker
# svelte-calendar npm install svelte-calendar
A lightweight datepicker with neat animations and a unique UX
# 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
# aovi-svelte npm install aovi-svelte
Easy use Aovi to validate forms or values in your components
# @easylogic/svelte-summernote npm install @easylogic/svelte-summernote
summernote extension for Svelte, a wysiwyg editor
# svelte-pick-a-place npm install svelte-pick-a-place
Svelte component for position and area selection with Leaflet
# select-madu npm install select-madu
A replacement for the select menu with searching, multiple selections, async data loading etc.,
# Simple Svelte Autocomplete npm install simple-svelte-autocomplete
Simple autocomplete / typeahead component for Svelte
# svelte-range-slider-pips npm install svelte-range-slider-pips
Range Slider Input, with Multi-handle and Pips features
# @spaceavocado/svelte-form npm install @spaceavocado/svelte-form
Simple Svelte form model handler and input validations
# @sveltejs/svelte-repl npm install @sveltejs/svelte-repl
The `<Repl>` component used on the Svelte website
# svelte-file-dropzone npm install svelte-file-dropzone
Svelte component for file upload and file dropzone.
# svelte-forms-lib npm install svelte-forms-lib
A lightweight library for managing forms in Svelte
# svelte-easy-crop npm install svelte-easy-crop
A Svelte component to crop images with easy interactions
# svelte-input-mask npm install svelte-input-mask
Input masking component for Svelte (credit cards, phones, dates, numbers, etc.)
# svelidation npm install svelidation
Easily customizable library for validation scenarios in svelte components.
# svelte-fullcalendar npm install svelte-fullcalendar
A Svelte component wrapper around FullCalendar.
# @svelte-parts/drop-file npm install @svelte-parts/drop-file
Drop files(s) or click to browse file system
# Event Calendar npm install @event-calendar/core
Full-sized drag & drop event calendar with resource view
# svelte-multiselect npm install svelte-multiselect
Keyboard-friendly, accessible and highly customizable multi-select component
# svelte-currency-input npm install svelte-currency-input
A form input that converts numbers to localized currency formats as you type
# simple-ui-components-in-svelte npm install simple-ui-components-in-svelte
A set of simple & flexible UI components
Icons #
# svelte-remixicon npm install svelte-remixicon
An icon library for svelte based on Remix Icon. Consists of more than 2000 icons.
# 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.
# svelte-awesome npm install svelte-awesome
Awesome SVG icon component for Svelte JS, built with Font Awesome icons
# @svelte-parts/icons npm install @svelte-parts/icons
SVG icons from feather icons, maki icons and octicons
Integration #
# @beyonk/svelte-facebook-customer-chat npm install @beyonk/svelte-facebook-customer-chat
Facebook Messaging Platform - Customer Chat Integration
# @beyonk/svelte-facebook-pixel npm install @beyonk/svelte-facebook-pixel
A Facebook pixel module for Svelte / Sapper
# @beyonk/svelte-google-analytics npm install @beyonk/svelte-google-analytics
Google Analytics tracking module for Svelte / Sapper
# @beyonk/svelte-googlemaps npm install @beyonk/svelte-googlemaps
Google Maps integration for Svelte
# @beyonk/svelte-trustpilot npm install @beyonk/svelte-trustpilot
Svelte / Vanilla JS Trustpilot Widget with proper SPA support
# svelte-native npm install svelte-native
Svelte controlling native components via Nativescript
# @lottiefiles/svelte-lottie-player npm install @lottiefiles/svelte-lottie-player
Lottie player component for use with Svelte for viewing Lottie animations.
# Svelte (and SvelteKit) OAuth2 npm install @macfja/svelte-oauth2
Add OAuth2 authorization in Svelte (and SvelteKit, works with SSR)
# svelte-google-auth npm install svelte-google-auth
Integration with Google Authenticartion for sveltekit
Internationalization #
# svelte-fluent npm install @nubolab-ffwd/svelte-fluent
Integration of Fluent localization system for Svelte
# svelte-intl npm install svelte-intl
Internationalize your Svelte apps using format-message and Intl object
# 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.
# 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
# typesafe-i18n npm install typesafe-i18n
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
# tolgee/svelte npm install @tolgee/svelte
Web-based localization tool enabling users to translate directly in the Svelte app they develop
Multimedia #
# svelte-content-loader npm install svelte-content-loader
SVG placeholder components for loading content
# svelte-image-encoder npm install svelte-image-encoder
An `<ImgEncoder>` component for editing and compressing profile pictures
# svelte-multitoneimage npm install svelte-multitoneimage
Component to easily generate multitone images
# Vime npm install @vime/svelte
Focused on making embedding and using media elements for the web simple.
# svelte-brick-gallery npm install svelte-brick-gallery
A masonry-like image gallery component for svelte
# TwicPics Components npm install @twicpics/components
Images and videos components - Context aware resizing and cropping, lazy-loading, LQIP, Next-Gen format, compression, CDN.
Routers #
# 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
# svelte-routing npm install svelte-routing
A declarative Svelte routing library with SSR support
# @jamen/svelte-router npm install @jamen/svelte-router
Svelte router using a store and components
# svelte-router-spa npm install svelte-router-spa
Svelte router specially designed for Single Page Applications (SPA)
# svelte-page-router npm install svelte-page-router
Simple config-based router with DX similar to VueRouter. Works well on the server-side
# svelte-pathfinder npm install svelte-pathfinder
Tiny, state-based, advanced router for SvelteJS.
# svelte-hash-router npm install svelte-hash-router
Simple Svelte 3 hash based router with global routes
# @slick-for/svelte npm install @slick-for/svelte
Manage your views and routing using class decorators and dependency injection
# @spaceavocado/svelte-router npm install @spaceavocado/svelte-router
Simple Svelte Router for Single Page Applications (SPA)
# svelte-state-renderer npm install svelte-state-renderer
abstract-state-router renderer for Svelte
Stores #
# svelte-websocket-store npm install svelte-websocket-store
Svelte store with a websocket backend
# query-store npm install query-store
Writable store that syncs with the browser's search params
# svelte-asyncable npm install svelte-asyncable
Asyncable store for Svelte 3 which is store a value as promise.
# svelte-webext-storage-adapter npm install svelte-webext-storage-adapter
Writable stores for Firefox/Chrome extensions using `chrome.storage
# svelte-observable npm install svelte-observable
Use observables in Svelte components with ease
# Undoable store npm install @macfja/svelte-undoable
Memento design pattern (undo/redo) in Svelte
# Persistent Store npm install @macfja/svelte-persistent-store
A (high order) store that keep its value through pages and reloads
# Invalidable Store npm install @macfja/svelte-invalidable
A (high order) store that can be requested to update itself
# Svelte Restate npm install svelte-restate
Immutable store for Svelte with full Typescript support and Redux Devtools integration
# svelte-fsm npm install svelte-fsm
Tiny, expressive, Svelte-optimized Finite State Machine library
# Svelte Expirable store npm install @macfja/svelte-expirable
A Svelte store with items that expire
# KitQL npm install @kitql/all-in
A set of tools, helping you building efficient apps in a fast way.
# svelte-exstore npm install svelte-exstore
Connect your store to Redux Devtools to enhance your work flow.
SvelteKit Adapters #
# @sveltejs/adapter-auto npm install @sveltejs/adapter-auto
Automatically chooses adapter for your current environment if possible
# @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.
# @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.
# @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.
# @sveltejs/adapter-node npm install @sveltejs/adapter-node
Adapter for SvelteKit apps that generates a standalone Node server.
# @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.
# @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.
# 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
# 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.
# svelte-adapter-deno npm install svelte-adapter-deno
SvelteKit adapter that generates a standalone Deno server.
# Svelte Multi Adapter npm install @macfja/svelte-multi-adapter
An adapter to launch multiple adapter
# svelte-adapter-azure-swa npm install svelte-adapter-azure-swa
SvelteKit adapter for Azure Static Web Apps.
# svelte-adapter-appengine npm install svelte-adapter-appengine
SvelteKit adapter for Google Cloud App Engine
# sveltekit-adapter-browser-extension npm install sveltekit-adapter-browser-extension
Build browser extensions with Svelte
# @budgetdraw/sveltekit-cloudflare-adapter npm install @budgetdraw/sveltekit-cloudflare-adapter
Alternative SvelteKit adapter for Cloudflare workers. Designed to be standalone and not use wrangler.
# sveltekit-adapter-wordpress-shortcode npm install sveltekit-adapter-wordpress-shortcode
Build wordpress shortcode plugins with SvelteKit
# Svelte(kit) adapter for Neutralino npm install @macfja/svelte-adapter-neutralino
A SvelteKit adapter to generate a Neutralinojs application from a SvelteKit project
# 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.
# svelte-adapter-github npm install svelte-adapter-github
Easily deploy your static site to GitHub Pages
# svelte-adapter-static-digitalocean npm install svelte-adapter-static-digitalocean
SvelteKit adapter for DigitalOcean App Platform static sites.
# SvelteKit Adapter Bun.js npm install svelte-adapter-bun
SvelteKit adapter that generates a standalone Bun server.
# 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
# SvelteKit Electron Adapter npm install @ptkdev/sveltekit-electron-adapter
Adapter for build desktop apps with Svelte Kit and Electron
# @carlosv2/adapter-node-ws npm install @carlosv2/adapter-node-ws
Adapter for SvelteKit apps that generates a standalone Node server with support for WebSockets.
# sveltekit-adapter-iis npm install sveltekit-adapter-iis
An adapter to deploy to IIS Server with iisnode installed
# sveltekit-html-minifier npm install sveltekit-html-minifier
Sveltekit Adapter to Minify the preload HTML page
# @jill64/sveltekit-adapter-aws npm install @jill64/sveltekit-adapter-aws
AWS adapter for SvelteKit with multiple architecture
Testing #
# svelte-carbonbadge npm install svelte-carbonbadge
Svelte badge component for https://www.websitecarbon.com/
# svelte-fragment-component npm install svelte-fragment-component
Component that renders its children with lifecycle hooks to simplify testing
# svelte-jester npm install svelte-jester
A Jest transformer for Svelte - compile your components before importing them into tests.
# jest-transform-svelte npm install jest-transform-svelte
Jest Transformer for Svelte components
# @testing-library/svelte npm install @testing-library/svelte
Simple and complete DOM testing utilities that encourage good practices
User 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.
# svelte-fullscreen npm install svelte-fullscreen
Component that performs fullscreen in DOM Elements
# svelte-infinite-scroll npm install svelte-infinite-scroll
Infinite Scroll Component to Svelte
# @beyonk/gdpr-cookie-consent-banner npm install @beyonk/gdpr-cookie-consent-banner
A GDPR compliant cookie consent banner implementation
# @beyonk/svelte-carousel npm install @beyonk/svelte-carousel
A super lightweight, super simple carousel for Svelte 3
# @beyonk/svelte-notifications npm install @beyonk/svelte-notifications
Svelte toast notifications that can be used in any JS application
# svelte-moveable npm install svelte-moveable
Component for moveable, draggable, resizable, scalable, rotatable, and more
# svelte-ruler npm install svelte-ruler
A Ruler component that can draw grids and scroll infinitely
# svelte-simple-modal npm install svelte-simple-modal
A simple, small, and content-agnostic modal for Svelte
# svelte-compare-image-slider npm install svelte-compare-image-slider
A simple tool for comparing two images.
# svelte-notifications npm install svelte-notifications
Simple and flexible notifications system
# svelte-page-progress npm install svelte-page-progress
Svelte Component that tracks a users progress through a page as they scroll
# svelte-image-compare npm install svelte-image-compare
Simple Svelte component to compare two images using slider.
# svelte-accessible-dialog npm install svelte-accessible-dialog
An accessible dialog component for Svelte apps
# svelte-infinite-loading npm install svelte-infinite-loading
An infinite scroll component for Svelte apps
# @sveltejs/gestures npm install @sveltejs/gestures
Svelte actions for cross-platform gesture detection (work in progress)
# @sveltejs/gl npm install @sveltejs/gl
A (very experimental) project to bring WebGL to Svelte
# @sveltejs/svelte-scroller npm install @sveltejs/svelte-scroller
A `<Scroller>` component for Svelte apps
# @sveltejs/svelte-subdivide npm install @sveltejs/svelte-subdivide
A component for building Blender-style layouts in Svelte apps
# svelte-grid npm install svelte-grid
A responsive, draggable and resizable grid layout, for Svelte
# Renderless Svelte npm install renderless-svelte
A collection of renderless/headless components for Svelte
# svelte-parallax npm install svelte-parallax
A spring-based parallax component for Svelte, based on react-spring/parallax.
# Svelte Modals npm install svelte-modals
A simple, flexible, zero-dependency modal manager for Svelte.
# svelte-hover-draw-svg npm install svelte-hover-draw-svg
A lightweight Svelte component to draw SVG on hover.
# Svelte Scroll Video npm install @macfja/svelte-scroll-video
A component to play a video by scrolling the page
# @prgm/sveltekit-progress-bar npm install @prgm/sveltekit-progress-bar
A progress bar component that hooks to SvelteKit navigation