Best Svelte UI Components Libraries

Link	Flowbite Svelte	Svelteui.org	STWUI	Attractions	Skeleton	Svelte Material UI	SVAR Svelte Core
Beschreibung	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.
Webseite	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
Aktualisieren	2022-12-31 12:10:05	2022-12-30 22:25:22	2022-12-31 12:11:02	2022-12-30 22:41:10	2022-12-30 22:41:12	2022-12-31 00:30:50	2024-08-12 11:54:50
Layout
AppShell	- Navbar, Sidebar, Footer components...	Ja Responsive shell for your application with header, navbar, sidebar, and footer	Nein	Nein	Ja Responsive shell for controlling application layout.	Nein	Nein
Container	Nein	Ja Center content horizontally with predefined max-width	Nein	Nein	Nein	Nein	Nein
Center		Ja Centers content vertically and horizontally		Nein	Nein	Nein	Nein
Dark Mode / Lightswitch	Ja	Nein	Nein	Nein	Ja Allows users to toggle between light and dark themes using Tailwind's dark mode feature.	Nein	Ja Comes with Light and Dark skins
Footer	Ja 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	Ja AppShell component		Nein	Nein	- Bottom App Bar : should be used for mobile devices only.	Nein
Grid	Nein	Ja Flexbox grid with variable amount of columns	Ja	Nein	Nein	Ja	Nein
Group	Nein	Ja Compose elements and components in a horizontal flex container	Nein	Nein	Nein	Nein	Nein
MediaQuery	Nein	Ja Apply styles to children if media query matches		Nein	Nein	Nein	Nein
Navbar	Ja 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)	Ja AppShell component		Nein	Ja App Bar : A header element for the top of your page layout. Pairs well with the App Shell.	Ja Top App Bar	Nein
SimpleGrid	Nein	Ja Responsive grid where each item takes equal amount of space		Nein	Nein	Nein	Nein
Sidebar	Ja 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...)	Ja AppShell component	Nein	Nein	Ja App Rail : A side navigation rail component	Nein	Ja Side area component sliding out on button click
Space	Nein	Ja Add horizontal or vertical spacing from theme	Nein	Nein	Nein	Nein	Nein
Stack	Nein	Ja Compose elements and components in vertical flex container	Nein	Nein	Nein	Nein	Nein
Navigation
Anchor	Ja 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	Ja Display links with theme styles		Nein	Nein	Nein	Nein
Breadcrumbs	Ja Show the location of the current page in a hierarchical structure using the breadcrumb components	Nein	Ja	Ja Breadcrumbs are used to indicate the current page's location in the navigation hierarchy, as well as to navigate through it.	Ja Displays the current navigation hierarchy.	Nein	Nein
Burger	Nein	Ja The Burger component renders an open/close menu button.	Ja Swap	Nein	Nein	Nein	Nein
Drawer (or Off-canvas)	Ja 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	Nein	Ja	Nein	Ja Displays an overlay panel that attaches to any side of the screen.	Ja	Nein
Pagination	Ja Use the Tailwind CSS pagination element to indicate a series of content across various pages	Nein	- This component is still a work in progress and is subject to change.	Ja	Ja Navigate between multiple pages of content.	Nein	Ja
Seo	Nein	Ja Manage your SEO information	Nein	Nein	Nein	Nein	Nein
Tabs	Ja 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...)	Ja Display links with theme styles	Ja	Ja	Ja Use tabs to quickly switch between different views.	Ja	Ja
Data Display
Accordion	Ja Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options	Nein	Ja	Ja A controller for multiple collapsible elements, allowing either one open panel at a time or infinite.	Ja Divide content into collapsible sections.	Ja	Nein
Avatar	Ja 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	Nein	Ja and AvatarGroup	Nein	Ja Display user avatars with an image or initials.	Nein	Nein
Badge	Ja Use Tailwind CSS badges as elements to show counts or labels separately or inside other components	Ja	Ja	Ja A distinctive colored circle to bring attention to an element.	Nein	Ja square badge, custom color...	Nein
Card	Ja Get started with a large variety of Tailwind CSS card examples for your web project	Nein	Ja	Ja A surface that stands out.	Nein	Ja with media, with actions, with a list...	Nein
Carousel	Ja Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options	Nein	Ja	Nein	Nein	Nein	Nein
Conic Gradients	Nein	Nein	Nein	Nein	Ja Create conic gradient data visualizations for pie charts, loading spinners, and more.	Nein	Nein
Dot	Nein	Nein	Nein	Ja A colorful dot to signal about all your important events.		Nein	Nein
Divider	Nein	Ja Horizontal line with optional label or vertical divider, with label...	Ja	Ja A thin horizontal line used to separate sections and group content, with optional text to display in the middle.	Ja Horizontal or vertical rules for sectioning your content.	Nein	Nein
Dropdown	Ja to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements	Nein	Ja	Ja Toggleable, contextual overlays for displaying additional details or actions.	Nein	Nein	Ja
Image	Ja 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...)	Ja Image with optional placeholder for loading and error state, BackgroundImage, radius...		Nein	Nein	Ja	Nein
Image Lists / Gallery		Nein		Nein	Nein	Ja available : Masonry, with rounded shapes	Nein
Kbd	Ja Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components	Ja Display keyboard button or keys combination	Nein	Nein	Nein	Nein	Nein
List Group	Ja Use the list group component to display a series of items, buttons or links inside a single element, with links, with icons...	Nein	Ja	Nein	Ja	Ja	Nein
Popover	Ja 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...)	Nein	Nein	Ja Extra content revealed on hover or focus within.	Nein	Nein	Nein
Rating	Ja Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes	Nein	Ja	Ja An input element used for rating with a number of stars.	Nein	Nein	Nein
Table	Ja 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..)	Nein	- This component is still a work in progress and is subject to change.	Ja	Ja Utilize a data-driven model to create simple presentational tables. A set of utility features for creating template-driven data tables.	Ja Progress indicator, Sticky header, Row selection, Pagination, Sortable...	Ja the ability to use SVAR DataGrid component (paid)
ThemeIcon	Ja 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.	Ja Render icon inside element with theme colors		Nein	Nein	Nein	Nein
Timeline	Ja 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...)	Ja Display list of events in chronological order	Ja Steps, Timeline	Nein	Ja Steppers: Divide and present content in sequenced steps. This Step component uses the locked property, which can prevent progress.	Nein	Nein
TreeView	Nein	Nein	Nein	Nein	Nein	Nein	Nein
Typography	Ja Use the typography and the utility classes from Tailwind CSS to style text with FlowBite	Ja Display text and links with theme styles or gradient	Ja	Ja	Ja Gradient Headings	Ja	Nein
Video	Ja 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...)	Nein	Nein	Nein	Nein	Nein	Nein
Inputs & Actions
ActionIcon	Ja	Ja	Ja	Nein	Nein	Nein	Nein
Autocomplete		Nein	Ja	Ja A text field suggesting options to select.	Nein	Ja	Ja
Button	Ja Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows	Ja	Ja	Ja A clickable entity for all your controlling and linking needs. Comes in three flavours: filled, outline and flat.	Nein	Ja Floating Action Button, Icon Button, Segmented Button...	Ja
Button Group	Ja Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line		Ja		Nein	Ja	Ja
Checkbox	Ja 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...)	Ja Custom icon, Indeterminate checkbox, 5 predefined sizes...	Ja	Ja Make the checkbox round (and slightly larger).	Nein	Ja	Ja
CheckboxGroup	Ja Vertical or Horizontal list group, advanced layout...	Ja	Ja	Ja A group of checkboxes from an array of items to select.	Nein	Ja	Ja
Chip		Ja Pick one or multiple values (States, ChipGroup)	Ja	Ja Tiny piece of additional information.	Nein	Ja	Nein
FileDropzone	Ja	Nein	Nein	Ja A large, prominent area for uploading files either by clicking or by dragging them into the area.	Ja Allow upload of files with drag and drop.	Nein	Ja
FileInput	Ja 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...)	Nein	Nein	Ja A regular file input matching the theme of the kit. Comes with buttons to select and deselect files.	Ja FileButton : Allows you to select files with a single click.	Nein	Ja
Floating Label	Ja 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	Nein	Nein	Nein	Nein	Nein	Nein
FormField				Ja 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.	Nein		Ja
Input	Ja Input element with icon	Ja render an icon, TextInput...	Ja		Nein		Ja
InputWrapper		Ja InputWrapper is used to wrap all SvelteUI inputs			Nein		Nein
Listboxes					Ja Interactive listboxes that maintain selection state.	Nein	Nein
NumberInput	Ja	Ja Number input with optional controls	Ja	Nein	Nein	Nein	Nein
Radio Button	Ja to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors		Ja	Nein	Nein	Ja	Ja
RadioGroup	Ja		Ja	Ja	Ja Capture feedback limited to a small set of options.		Ja
Range	Ja to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options	Nein		Ja An slider for selecting a value or a range.	Ja Capture input from a range of values, including optional ticks.	Ja	Ja A slider for selecting numbers
Search Input	Ja 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		Nein		Nein	Nein	Nein
Select	Ja to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants	Ja NativeSelect : Capture user feedback limited to large set of options	Ja	Nein	Nein	Ja	Ja
Speed Dial	Ja 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.	Nein	Nein	Nein	Nein	Nein	Nein
Slider	- see Range component	Nein	Ja Step and Show Step	Ja An slider for selecting a value or a range.	Nein	Ja	Ja
Switch Toggle	Ja 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	Ja Capture boolean input from user, Inner labels and Size	Ja	Ja	Ja A sliding toggle element that can capture input from a user.	Ja	Ja
Textarea	Ja	Nein	- beta version	Nein	Nein	Nein	Nein
TextInput	Ja	Ja Text input with descriptions, with icon, right section...		Ja	Nein	Ja	Ja
UnstyledButton		Ja Render button with no theme colors					Ja
Dates
DatePicker	- experimental component and only works with SvelteKit.	Nein	Ja	Ja A date picker that supports both text input and a dropdown calendar.	Nein	Nein	Ja
TimePicker	Nein	Nein	Nein	Ja A time picker that supports both the text input and a dropdown with buttons.	Nein	Nein	Ja
Kalender	Nein	- coming soon	Nein	Ja A calendar component representing a month with selectable days.	Nein	Nein	Ja
Feedback
Alert	Ja Show contextual information to your users using alert elements based on Tailwind CSS	Ja Attract user attention with an important message	Ja	Nein	Ja Display customizable alerts to garner attention and provide critical actions.	Nein	Ja
Loading	Nein	Ja Indicate loading state	Nein	Ja	Nein	Nein	Nein
Notification / Toasts	Ja Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions	Ja Attract user attention with an important message (with icon...)	Ja	Nein	Ja Simple notifications utilizing a dynamic queue system.	Nein	Ja
Snackbar	Nein	Nein	Nein	Ja A small snackbar to display status messages.	Nein	Ja	Nein
SnackbarContainer	Nein	Nein	Nein	Ja The wrapper element creating a context to show snackbars.	Nein		Nein
Linear Progress	Ja 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...)	Ja Give user feedback for status of the task	Ja	Nein	Ja An indicator showing the progress or completion of a task.	Ja	Nein
Progress Radials / Circular Progress	Nein	Nein	Ja	Nein	Ja Displays a radial indicator showing the progress or completion of a task.	Ja Circular Progress	Nein
Skeleton	Ja 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	Ja Indicate content loading state	Nein	Nein	Nein	Nein	Nein
Spinner	Ja Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG	Nein	Nein	Nein	Nein	Nein	Nein
Overlay
Affix	- Sticky navbar	Ja Render Svelte component inside portal at fixed position	Nein	Nein	Nein		Nein
Menu	Ja 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...)	Ja Combine a list of secondary actions into single interactive area, icon, hover...	Ja	Nein	Ja Provides quick context menus when you tap the trigger element.	Ja and Menu Surface	Nein
Modal	Ja Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles	Ja Modal with optional header	Ja	Ja An overlay allowing any modal content to appear on the screen prominently. Works well with the Dialog component.	Ja High priority dialogs and modals using a dynamic queue system.	Ja	Ja
Dialog	Ja	Ja	Ja	Ja A modal window that informs users about a task and can contain critical information or require actions.	Ja High priority dialogs and modals using a dynamic queue system.	Ja	Ja
Overlay	Nein	Ja Overlays given element with div element with any color and opacity	Nein	Nein	Nein	Nein	Ja
Tooltip	Ja Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element (Tooltip arrow, colors...)	Ja Renders tooltip at given element on mouse over or any other event (Tooltip arrow...)	Ja	Nein	Ja Informative tooltips that render on mouse over.	Ja	Nein
Utils
Code blocks		Ja Prism : Code highlight with SvelteUI theme colors and styles	Nein		Ja Displays pre-formatted source code, with optional support for Highlight.js syntax highlighting.	Nein	Nein
Colors	Ja Choose your primary color in tailwind.config.cjs file	Nein		Nein	Nein	Nein	Nein
Close Button	Ja The CloseButton components are used throughout the library and you can use it for your app as well	Nein	Nein	Nein	Nein	Nein	Nein
Label	Ja The Label components are used throughout the library and you can use it for your app as well	Nein		Nein	Nein	Ja "Common" component	Nein
Local Storage Store			Nein	Nein	Ja An extended version of the Svelte writable store that includes pub/sub to local storage.	Nein	Nein
Toolbar	Ja Use the following Tailwind CSS powered toolbars to show groups of tool buttons	Nein		Nein	Nein	Nein	Nein
Svelte Actions / Hooks Library
use-move	Nein	Ja Handles the movement of an element based on mouse and touch events	Nein	Nein	Nein	Nein	Nein
use-clipboard	Nein	Ja Copies text to the clipboard when DOM element is clicked	Ja	Nein	Ja Allows you to quickly copy select data to the clipboard.	Nein	Nein
use-focus-trap	Nein	Ja Traps the focus inside the given DOM node	Nein	Nein	Ja Allows you to contain focus within elements on-demand.	Nein	Nein
Image Filters	Nein	Nein	Nein	Nein	Ja Applies a set of unique SVG filters. Best used with images, but also available to select components, such as Avatars.	Nein	Nein
Ich mag das	Likes 4	Likes 6	Likes 1	Likes 1	Likes 2	Likes 0	Likes 0

User reviews and comments