Best Svelte UI Components Libraries

Link	Flowbite Svelte	Svelteui.org	STWUI	Attractions	Skeleton	Svelte Material UI	SVAR Svelte Core
Description	Flowbite is an open-source library of over 400+ web components and interactive elements built with the utility classes from Tailwind CSS. Flowbite-Svelte is the official Flowbite library for Svelte. All interactivities are handled by Svelte. Unlike other libraries, Flowbite focuses on a singular and opinionated design aesthetic. Flowbite is a general purpose library, which means it can be used within any framework, but also provides framework-specific variations like Flowbite Svelte. It’s relatively simple to tailor a Flowbite component to work within an existing Tailwind design system.	SvelteUI includes more than 50+ customizable components. All SvelteUI packages are built with TypeScript and support it by default.	Opinionated yet customizable Svelte-TailwindCSS component library. Svelte-TailwindCSS UI (STWUI) is currently in pre-release. There has been a lot work already but a lot of work still needs to be done.	A pretty cool UI kit for Svelte. 49 components and more to come.	A fully featured UI Toolkit. Build reactive interfaces quickly using Svelte + Tailwind CSS. Skeleton is currently in beta. Expect breaking changes prior to v1.0. Skeleton is a UI library, featuring tight integration between Svelte and Tailwind CSS. In short, the library utilizes Tailwind’s utility class-based design system to quickly and easily customize and extend the look and feel of each component. Paired with Svelte’s powerful component architecture, Skeleton creates customized, responsive, and reactive interfaces for any size project.	Material UI components for Svelte apps. Many SMUI components are based on Material Design Components for Web, by Google. It integrates these components using the "Advanced Approach", where the MDC Foundation does some business logic, and the SMUI component handles DOM updates and data binding.	SVAR Svelte Core is an open-source UI library offering essential controls for building interactive and high-performance Svelte projects. It includes everything from simple elements like buttons, checkboxes, and radio buttons to more complex components like date pickers, combo boxes, select boxes, and popups.
Website	flowbite-svelte.com	svelteui.org	vercel.app	github.io/...	skeleton.dev	sveltematerialui.com	svar.dev/...
Size				240.6 KB in size and only 57.3 KB gzipped
Last update	Dec. 31^st 2022 12:10:05 PM	Dec. 30^th 2022 10:25:22 PM	Dec. 31^st 2022 12:11:02 PM	Dec. 30^th 2022 10:41:10 PM	Dec. 30^th 2022 10:41:12 PM	Dec. 31^st 2022 12:30:50 AM	Aug. 12^th 2024 11:54:50 AM
Layout
AppShell	- Navbar, Sidebar, Footer components...	Yes Responsive shell for your application with header, navbar, sidebar, and footer	No	No	Yes Responsive shell for controlling application layout.	No	No
Container	No	Yes Center content horizontally with predefined max-width	No	No	No	No	No
Center		Yes Centers content vertically and horizontally		No	No	No	No
Dark Mode / Lightswitch	Yes	No	No	No	Yes Allows users to toggle between light and dark themes using Tailwind's dark mode feature.	No	Yes Comes with Light and Dark skins
Footer	Yes Use the footer section at the bottom of every page to show valuable information to your users, such as sitemap links, a copyright notice, and a logo	Yes AppShell component		No	No	- Bottom App Bar : should be used for mobile devices only.	No
Grid	No	Yes Flexbox grid with variable amount of columns	Yes	No	No	Yes	No
Group	No	Yes Compose elements and components in a horizontal flex container	No	No	No	No	No
MediaQuery	No	Yes Apply styles to children if media query matches		No	No	No	No
Navbar	Yes The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns (Navbar with search, CTA button...Sticky navbar)	Yes AppShell component		No	Yes App Bar : A header element for the top of your page layout. Pairs well with the App Shell.	Yes Top App Bar	No
SimpleGrid	No	Yes Responsive grid where each item takes equal amount of space		No	No	No	No
Sidebar	Yes Use the sidebar component to show a list of menu items and multi-level dropdown items on either side of the page to navigate on your website (with content separator, add a CTA button, show logo...)	Yes AppShell component	No	No	Yes App Rail : A side navigation rail component	No	Yes Side area component sliding out on button click
Space	No	Yes Add horizontal or vertical spacing from theme	No	No	No	No	No
Stack	No	Yes Compose elements and components in vertical flex container	No	No	No	No	No
Navigation
Anchor	Yes The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card	Yes Display links with theme styles		No	No	No	No
Breadcrumbs	Yes Show the location of the current page in a hierarchical structure using the breadcrumb components	No	Yes	Yes Breadcrumbs are used to indicate the current page's location in the navigation hierarchy, as well as to navigate through it.	Yes Displays the current navigation hierarchy.	No	No
Burger	No	Yes The Burger component renders an open/close menu button.	Yes Swap	No	No	No	No
Drawer (or Off-canvas)	Yes The Drawer component can be used as a hidden off-canvas sidebar for navigation and to show other information based on multiple styles and placements	No	Yes	No	Yes Displays an overlay panel that attaches to any side of the screen.	Yes	No
Pagination	Yes Use the Tailwind CSS pagination element to indicate a series of content across various pages	No	- This component is still a work in progress and is subject to change.	Yes	Yes Navigate between multiple pages of content.	No	Yes
Seo	No	Yes Manage your SEO information	No	No	No	No	No
Tabs	Yes Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container (Tabs with underline, with icons...)	Yes Display links with theme styles	Yes	Yes	Yes Use tabs to quickly switch between different views.	Yes	Yes
Data Display
Accordion	Yes Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options	No	Yes	Yes A controller for multiple collapsible elements, allowing either one open panel at a time or infinite.	Yes Divide content into collapsible sections.	Yes	No
Avatar	Yes Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes	No	Yes and AvatarGroup	No	Yes Display user avatars with an image or initials.	No	No
Badge	Yes Use Tailwind CSS badges as elements to show counts or labels separately or inside other components	Yes	Yes	Yes A distinctive colored circle to bring attention to an element.	No	Yes square badge, custom color...	No
Card	Yes Get started with a large variety of Tailwind CSS card examples for your web project	No	Yes	Yes A surface that stands out.	No	Yes with media, with actions, with a list...	No
Carousel	Yes Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options	No	Yes	No	No	No	No
Conic Gradients	No	No	No	No	Yes Create conic gradient data visualizations for pie charts, loading spinners, and more.	No	No
Dot	No	No	No	Yes A colorful dot to signal about all your important events.		No	No
Divider	No	Yes Horizontal line with optional label or vertical divider, with label...	Yes	Yes A thin horizontal line used to separate sections and group content, with optional text to display in the middle.	Yes Horizontal or vertical rules for sectioning your content.	No	No
Dropdown	Yes to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements	No	Yes	Yes Toggleable, contextual overlays for displaying additional details or actions.	No	No	Yes
Image	Yes The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations (image effects...)	Yes Image with optional placeholder for loading and error state, BackgroundImage, radius...		No	No	Yes	No
Image Lists / Gallery		No		No	No	Yes available : Masonry, with rounded shapes	No
Kbd	Yes Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components	Yes Display keyboard button or keys combination	No	No	No	No	No
List Group	Yes Use the list group component to display a series of items, buttons or links inside a single element, with links, with icons...	No	Yes	No	Yes	Yes	No
Popover	Yes Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered based on multiple styles (Image popover, progress popover...)	No	No	Yes Extra content revealed on hover or focus within.	No	No	No
Rating	Yes Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes	No	Yes	Yes An input element used for rating with a number of stars.	No	No	No
Table	Yes Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells (Checkboxes, search input, table foot, table caption, colors..)	No	- This component is still a work in progress and is subject to change.	Yes	Yes Utilize a data-driven model to create simple presentational tables. A set of utility features for creating template-driven data tables.	Yes Progress indicator, Sticky header, Row selection, Pagination, Sortable...	Yes the ability to use SVAR DataGrid component (paid)
ThemeIcon	Yes You can uses Svelte-Heros-v2 and other icon sets for Flowbite-Svelte. Svelte-Heros-v2 icons allow you to change the icon color, size, and other props.	Yes Render icon inside element with theme colors		No	No	No	No
Timeline	Yes Get started with the responsive timeline component to show data in a chronological order with support for multiple styles, sizes, and variants (vertical timeline, horizontal timeline, activity log...)	Yes Display list of events in chronological order	Yes Steps, Timeline	No	Yes Steppers: Divide and present content in sequenced steps. This Step component uses the locked property, which can prevent progress.	No	No
TreeView	No	No	No	No	No	No	No
Typography	Yes Use the typography and the utility classes from Tailwind CSS to style text with FlowBite	Yes Display text and links with theme styles or gradient	Yes	Yes	Yes Gradient Headings	Yes	No
Video	Yes Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS (responsive, autoplay, custom styles: rounded corners...)	No	No	No	No	No	No
Inputs & Actions
ActionIcon	Yes	Yes	Yes	No	No	No	No
Autocomplete		No	Yes	Yes A text field suggesting options to select.	No	Yes	Yes
Button	Yes Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows	Yes	Yes	Yes A clickable entity for all your controlling and linking needs. Comes in three flavours: filled, outline and flat.	No	Yes Floating Action Button, Icon Button, Segmented Button...	Yes
Button Group	Yes Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line		Yes		No	Yes	Yes
Checkbox	Yes The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode. (checkbox with a link, helper text, colors...)	Yes Custom icon, Indeterminate checkbox, 5 predefined sizes...	Yes	Yes Make the checkbox round (and slightly larger).	No	Yes	Yes
CheckboxGroup	Yes Vertical or Horizontal list group, advanced layout...	Yes	Yes	Yes A group of checkboxes from an array of items to select.	No	Yes	Yes
Chip		Yes Pick one or multiple values (States, ChipGroup)	Yes	Yes Tiny piece of additional information.	No	Yes	No
FileDropzone	Yes	No	No	Yes A large, prominent area for uploading files either by clicking or by dragging them into the area.	Yes Allow upload of files with drag and drop.	No	Yes
FileInput	Yes The file input component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, variants and support for dark mode. (Multiple files, Helper text...)	No	No	Yes A regular file input matching the theme of the kit. Comes with buttons to select and deselect files.	Yes FileButton : Allows you to select files with a single click.	No	Yes
Floating Label	Yes Use the floating label style for the input field elements to replicate the Material UI design system from Google and choose from multiple styles and sizes	No	No	No	No	No	No
FormField				Yes A responsive form field skeleton – providing a way to label and describe the field. Note that this component doesn't add any form handling capabilities; it is merely presentational.	No		Yes
Input	Yes Input element with icon	Yes render an icon, TextInput...	Yes		No		Yes
InputWrapper		Yes InputWrapper is used to wrap all SvelteUI inputs			No		No
Listboxes					Yes Interactive listboxes that maintain selection state.	No	No
NumberInput	Yes	Yes Number input with optional controls	Yes	No	No	No	No
Radio Button	Yes to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors		Yes	No	No	Yes	Yes
RadioGroup	Yes		Yes	Yes	Yes Capture feedback limited to a small set of options.		Yes
Range	Yes to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options	No		Yes An slider for selecting a value or a range.	Yes Capture input from a range of values, including optional ticks.	Yes	Yes A slider for selecting numbers
Search Input	Yes Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes		No		No	No	No
Select	Yes to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants	Yes NativeSelect : Capture user feedback limited to large set of options	Yes	No	No	Yes	Yes
Speed Dial	Yes The speed dial component can be used as a quick way to show a list of action buttons to a user when hovering or clicking on the main trigger element.	No	No	No	No	No	No
Slider	- see Range component	No	Yes Step and Show Step	Yes An slider for selecting a value or a range.	No	Yes	Yes
Switch Toggle	Yes Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors	Yes Capture boolean input from user, Inner labels and Size	Yes	Yes	Yes A sliding toggle element that can capture input from a user.	Yes	Yes
Textarea	Yes	No	- beta version	No	No	No	No
TextInput	Yes	Yes Text input with descriptions, with icon, right section...		Yes	No	Yes	Yes
UnstyledButton		Yes Render button with no theme colors					Yes
Dates
DatePicker	- experimental component and only works with SvelteKit.	No	Yes	Yes A date picker that supports both text input and a dropdown calendar.	No	No	Yes
TimePicker	No	No	No	Yes A time picker that supports both the text input and a dropdown with buttons.	No	No	Yes
Calendar	No	- coming soon	No	Yes A calendar component representing a month with selectable days.	No	No	Yes
Feedback
Alert	Yes Show contextual information to your users using alert elements based on Tailwind CSS	Yes Attract user attention with an important message	Yes	No	Yes Display customizable alerts to garner attention and provide critical actions.	No	Yes
Loading	No	Yes Indicate loading state	No	Yes	No	No	No
Notification / Toasts	Yes Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions	Yes Attract user attention with an important message (with icon...)	Yes	No	Yes Simple notifications utilizing a dynamic queue system.	No	Yes
Snackbar	No	No	No	Yes A small snackbar to display status messages.	No	Yes	No
SnackbarContainer	No	No	No	Yes The wrapper element creating a context to show snackbars.	No		No
Linear Progress	Yes Use the progress bar component to show the completion rate of a data indicator or use it as a loader element (with label inside, outside...colors...)	Yes Give user feedback for status of the task	Yes	No	Yes An indicator showing the progress or completion of a task.	Yes	No
Progress Radials / Circular Progress	No	No	Yes	No	Yes Displays a radial indicator showing the progress or completion of a task.	Yes Circular Progress	No
Skeleton	Yes The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video	Yes Indicate content loading state	No	No	No	No	No
Spinner	Yes Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG	No	No	No	No	No	No
Overlay
Affix	- Sticky navbar	Yes Render Svelte component inside portal at fixed position	No	No	No		No
Menu	Yes Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles. (with icons, images...)	Yes Combine a list of secondary actions into single interactive area, icon, hover...	Yes	No	Yes Provides quick context menus when you tap the trigger element.	Yes and Menu Surface	No
Modal	Yes Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles	Yes Modal with optional header	Yes	Yes An overlay allowing any modal content to appear on the screen prominently. Works well with the Dialog component.	Yes High priority dialogs and modals using a dynamic queue system.	Yes	Yes
Dialog	Yes	Yes	Yes	Yes A modal window that informs users about a task and can contain critical information or require actions.	Yes High priority dialogs and modals using a dynamic queue system.	Yes	Yes
Overlay	No	Yes Overlays given element with div element with any color and opacity	No	No	No	No	Yes
Tooltip	Yes Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element (Tooltip arrow, colors...)	Yes Renders tooltip at given element on mouse over or any other event (Tooltip arrow...)	Yes	No	Yes Informative tooltips that render on mouse over.	Yes	No
Utils
Code blocks		Yes Prism : Code highlight with SvelteUI theme colors and styles	No		Yes Displays pre-formatted source code, with optional support for Highlight.js syntax highlighting.	No	No
Colors	Yes Choose your primary color in tailwind.config.cjs file	No		No	No	No	No
Close Button	Yes The CloseButton components are used throughout the library and you can use it for your app as well	No	No	No	No	No	No
Label	Yes The Label components are used throughout the library and you can use it for your app as well	No		No	No	Yes "Common" component	No
Local Storage Store			No	No	Yes An extended version of the Svelte writable store that includes pub/sub to local storage.	No	No
Toolbar	Yes Use the following Tailwind CSS powered toolbars to show groups of tool buttons	No		No	No	No	No
Svelte Actions / Hooks Library
use-move	No	Yes Handles the movement of an element based on mouse and touch events	No	No	No	No	No
use-clipboard	No	Yes Copies text to the clipboard when DOM element is clicked	Yes	No	Yes Allows you to quickly copy select data to the clipboard.	No	No
use-focus-trap	No	Yes Traps the focus inside the given DOM node	No	No	Yes Allows you to contain focus within elements on-demand.	No	No
Image Filters	No	No	No	No	Yes Applies a set of unique SVG filters. Best used with images, but also available to select components, such as Avatars.	No	No
Like	Likes 4	Likes 6	Likes 1	Likes 1	Likes 2	Likes 0	Likes 0

User reviews and comments