Best Svelte UI Components Libraries | Tableaux comparatifs

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