Compare Sizes
English Français Español

Best Svelte UI Components Libraries


Svelte is a JavaScript framework for building user interfaces. It is a relatively new framework that aims to provide a more lightweight and efficient alternative to frameworks like React and Angular.

One of the key features of Svelte is that it uses a compile-time approach to building user interfaces, which means that it converts your component code into highly optimized vanilla JavaScript at build time, rather than relying on runtime interpretation like many other frameworks. This can result in faster and more efficient performance, especially on lower-powered devices.

Svelte also has a library of UI components that you can use to build your application. These components are designed to be easy to use and customizable, and they can help you build interactive and responsive user interfaces quickly and efficiently. Some of the components that are included in the Svelte library include buttons, form elements, layout components, and more. You can also create your own custom components and reuse them throughout your application, or you can use one of the following Svelte UI component library.

Here is the Best Svelte UI components libraries comparison table. Do not hesitate to help to maintain this collaborative detailed comparison up-to-date.

Flowbite SvelteSvelteui.orgSTWUIAttractionsSkeletonSvelte Material UI

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.
Size240.6 KB in size and only 57.3 KB gzipped
Aktualisieren2022-12-31 12:10:052022-12-30 22:25:222022-12-31 12:11:022022-12-30 22:41:102022-12-30 22:41:122022-12-31 00:30:50
AppShell- Navbar, Sidebar, Footer components...Ja Responsive shell for your application with header, navbar, sidebar, and footerNeinNeinJa Responsive shell for controlling application layout.Nein
ContainerNeinJa Center content horizontally with predefined max-widthNeinNeinNeinNein
CenterJa Centers content vertically and horizontallyNeinNeinNein
Dark Mode / LightswitchJaNeinNeinNeinJa Allows users to toggle between light and dark themes using Tailwind's dark mode feature.Nein
FooterJa 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 logoJa AppShell componentNeinNein- Bottom App Bar : should be used for mobile devices only.
GridNeinJa Flexbox grid with variable amount of columnsJaNeinNeinJa
GroupNeinJa Compose elements and components in a horizontal flex containerNeinNeinNeinNein
MediaQueryNeinJa Apply styles to children if media query matchesNeinNeinNein
NavbarJa 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 componentNeinJa App Bar : A header element for the top of your page layout. Pairs well with the App Shell.Ja Top App Bar
SimpleGridNeinJa Responsive grid where each item takes equal amount of spaceNeinNeinNein
SidebarJa 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 componentNeinNeinJa App Rail : A side navigation rail componentNein
SpaceNeinJa Add horizontal or vertical spacing from themeNeinNeinNeinNein
StackNeinJa Compose elements and components in vertical flex containerNeinNeinNeinNein
AnchorJa 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 cardJa Display links with theme stylesNeinNeinNein
BreadcrumbsJa Show the location of the current page in a hierarchical structure using the breadcrumb componentsNeinJaJa 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
BurgerNeinJa The Burger component renders an open/close menu button.Ja SwapNeinNeinNein
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 placementsNeinJaNeinJa Displays an overlay panel that attaches to any side of the screen.Ja
PaginationJa Use the Tailwind CSS pagination element to indicate a series of content across various pagesNein- This component is still a work in progress and is subject to change.JaJa Navigate between multiple pages of content.Nein
SeoNeinJa Manage your SEO informationNeinNeinNeinNein
TabsJa 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 stylesJaJaJa Use tabs to quickly switch between different views.Ja
Data Display
AccordionJa Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute optionsNeinJaJa A controller for multiple collapsible elements, allowing either one open panel at a time or infinite.Ja Divide content into collapsible sections.Ja
AvatarJa 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 sizesNeinJa and AvatarGroupNeinJa Display user avatars with an image or initials.Nein
BadgeJa Use Tailwind CSS badges as elements to show counts or labels separately or inside other componentsJaJaJa A distinctive colored circle to bring attention to an element.NeinJa square badge, custom color...
CardJa Get started with a large variety of Tailwind CSS card examples for your web projectNeinJaJa A surface that stands out.NeinJa with media, with actions, with a list...
CarouselJa Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and optionsNeinJaNeinNeinNein
Conic GradientsNeinNeinNeinNeinJa Create conic gradient data visualizations for pie charts, loading spinners, and more.Nein
DotNeinNeinNeinJa A colorful dot to signal about all your important events.Nein
DividerNeinJa Horizontal line with optional label or vertical divider, with label...JaJa 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
DropdownJa to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placementsNeinJaJa Toggleable, contextual overlays for displaying additional details or actions.NeinNein
ImageJa 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...NeinNeinJa
Image Lists / GalleryNeinNeinNeinJa available : Masonry, with rounded shapes
KbdJa Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other componentsJa Display keyboard button or keys combinationNeinNeinNeinNein
List GroupJa Use the list group component to display a series of items, buttons or links inside a single element, with links, with icons...NeinJaNeinJaJa
PopoverJa 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...)NeinNeinJa Extra content revealed on hover or focus within.NeinNein
RatingJa Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizesNeinJaJa An input element used for rating with a number of stars.NeinNein
TableJa 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.JaJa 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...
ThemeIconJa 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 colorsNeinNeinNein
TimelineJa 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 orderJa Steps, TimelineNeinJa Steppers: Divide and present content in sequenced steps. This Step component uses the locked property, which can prevent progress.Nein
TypographyJa Use the typography and the utility classes from Tailwind CSS to style text with FlowBiteJa Display text and links with theme styles or gradientJaJaJa Gradient HeadingsJa
VideoJa 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...)NeinNeinNeinNeinNein
Inputs & Actions
AutocompleteNeinJaJa A text field suggesting options to select.NeinJa
ButtonJa Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadowsJaJaJa A clickable entity for all your controlling and linking needs. Comes in three flavours: filled, outline and flat.NeinJa Floating Action Button, Icon Button, Segmented Button...
Button GroupJa Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal lineJaNeinJa
CheckboxJa 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...JaJa Make the checkbox round (and slightly larger).NeinJa
CheckboxGroupJa Vertical or Horizontal list group, advanced layout...JaJaJa A group of checkboxes from an array of items to select.NeinJa
ChipJa Pick one or multiple values (States, ChipGroup)JaJa Tiny piece of additional information.NeinJa
FileDropzoneJaNeinNeinJa 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
FileInputJa 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...)NeinNeinJa 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
Floating LabelJa 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 sizesNeinNeinNeinNeinNein
FormFieldJa 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
InputJa Input element with iconJa render an icon, TextInput...JaNein
InputWrapperJa InputWrapper is used to wrap all SvelteUI inputsNein
ListboxesJa Interactive listboxes that maintain selection state.Nein
NumberInputJaJa Number input with optional controlsJaNeinNeinNein
Radio ButtonJa to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colorsJaNeinNeinJa
RadioGroupJaJaJaJa Capture feedback limited to a small set of options.
RangeJa to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple optionsNeinJa An slider for selecting a value or a range.Ja Capture input from a range of values, including optional ticks.Ja
Search InputJa 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 sizesNeinNeinNein
SelectJa to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variantsJa NativeSelect : Capture user feedback limited to large set of optionsJaNeinNeinJa
Speed DialJa 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.NeinNeinNeinNeinNein
Slider- see Range componentNeinJa Step and Show StepJa An slider for selecting a value or a range.NeinJa
Switch ToggleJa Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colorsJa Capture boolean input from user, Inner labels and SizeJaJaJa A sliding toggle element that can capture input from a user.Ja
TextareaJaNein- beta versionNeinNeinNein
TextInputJaJa Text input with descriptions, with icon, right section...JaNeinJa
UnstyledButtonJa Render button with no theme colors
DatePicker- experimental component and only works with SvelteKit.NeinJaJa A date picker that supports both text input and a dropdown calendar.NeinNein
TimePickerNeinNeinNeinJa A time picker that supports both the text input and a dropdown with buttons.NeinNein
KalenderNein- coming soonNeinJa A calendar component representing a month with selectable days.NeinNein
AlertJa Show contextual information to your users using alert elements based on Tailwind CSSJa Attract user attention with an important messageJaNeinJa Display customizable alerts to garner attention and provide critical actions.Nein
LoadingNeinJa Indicate loading stateNeinJaNeinNein
Notification / ToastsJa Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positionsJa Attract user attention with an important message (with icon...)JaNeinJa Simple notifications utilizing a dynamic queue system.Nein
SnackbarNeinNeinNeinJa A small snackbar to display status messages.NeinJa
SnackbarContainerNeinNeinNeinJa The wrapper element creating a context to show snackbars.Nein
Linear ProgressJa 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 taskJaNeinJa An indicator showing the progress or completion of a task.Ja
Progress Radials / Circular ProgressNeinNeinJaNeinJa Displays a radial indicator showing the progress or completion of a task.Ja Circular Progress
SkeletonJa 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 videoJa Indicate content loading stateNeinNeinNeinNein
SpinnerJa Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVGNeinNeinNeinNeinNein
Affix- Sticky navbarJa Render Svelte component inside portal at fixed positionNeinNeinNein
MenuJa 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...JaNeinJa Provides quick context menus when you tap the trigger element.Ja and Menu Surface
ModalJa Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and stylesJa Modal with optional headerJaJa 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
DialogJaJaJaJa 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
OverlayNeinJa Overlays given element with div element with any color and opacityNeinNeinNeinNein
TooltipJa 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...)JaNeinJa Informative tooltips that render on mouse over.Ja
Code blocksJa Prism : Code highlight with SvelteUI theme colors and stylesNeinJa Displays pre-formatted source code, with optional support for Highlight.js syntax highlighting.Nein
ColorsJa Choose your primary color in tailwind.config.cjs fileNeinNeinNeinNein
Close ButtonJa The CloseButton components are used throughout the library and you can use it for your app as wellNeinNeinNeinNeinNein
LabelJa The Label components are used throughout the library and you can use it for your app as wellNeinNeinNeinJa "Common" component
Local Storage StoreNeinNeinJa An extended version of the Svelte writable store that includes pub/sub to local storage.Nein
ToolbarJa Use the following Tailwind CSS powered toolbars to show groups of tool buttonsNeinNeinNeinNein
Svelte Actions / Hooks Library
use-moveNeinJa Handles the movement of an element based on mouse and touch eventsNeinNeinNeinNein
use-clipboardNeinJa Copies text to the clipboard when DOM element is clickedJaNeinJa Allows you to quickly copy select data to the clipboard.Nein
use-focus-trapNeinJa Traps the focus inside the given DOM nodeNeinNeinJa Allows you to contain focus within elements on-demand.Nein
Image FiltersNeinNeinNeinNeinJa Applies a set of unique SVG filters. Best used with images, but also available to select components, such as Avatars.Nein
Ich mag das
Best Svelte UI components libraries comparison table
2023-01-01 08:10:10
View changes
Manage backups

User reviews and comments

No comments yet. Be the first to leave your review.