2019-12-20

State of Svelte UI Libraries

Awesome list of Svelte component libraries, which is CSS Framework that have Svelte integration. Here's the comparison among them all:

Component SvelteStrap 3.2.8 Svelma Bulma Components Svelte-MUI Svelte-Chota Smelte
Based on https://getbootstrap.com/ https://bulma.io/ https://bulma.io/ https://material.io/ https://jenil.github.io/chota/ https://material.io/
URL https://bestguy.github.io/sveltestrap/ https://c0bra.github.io/svelma/install http://svelte-bulma-components.surge.sh/ https://svelte-mui.ibbf.ru/ https://alexxnb.github.io/svelte-chota/ https://smelte.netlify.com/
Layout Container, Row, Col div.tile

Container, Row, Col
Alert/Flash/Toast Alert, Toast Message, Notification, Snackbar.(), Toast.()
Snackbar
Snackbar
Breadcrumb Breadcrumb




Buttons Button

Button, ButtonGroup Button Button
Card Card article.media

Card Card
Animation Collapse, Fade Collapse
Ripple Details
Dropdown Dropdown
Dropdown

Select
Forms Form, FormGroup, Label, Input Field, Input, Switch
CheckBox, Datepicker, Datefield, Textfield, Radio Input, Field, Radio, Checkbox TextField, SearchBar
Jumbotron/Hero Jumbotron section.hero



List ListGroup



List
Modal/Dialog Modal Dialog.(), Modal Modal Dialog Modal Dialog
Nav/Tabs/Pills/Acordion Nav Tabs TabsContainer ExpansionPanel, Menu Nav, Tabs Tabs, Menu
NavBar with Mobile NavBar
Navbar Sidepanel
NavigationDrawer
Pagination Pagination
Pagination


Progress Progress, Spinner Progress


PorgressLinear, ProgressCircular
Table Table table.table


DataTable
Icon
Icon .fa Icon icon*=mdi*, Icon
Tag/Label



Tag Chip
Media Media



Image
Tooltip




Tooltip
Treeview




Treeview


There's also many CSS Framework that doesn't use Javascript such as: TentCSS, Milligram, Mustard, MiniCSS, Bulma, and Chota (on the table).

Update 2020: there's SvelteMaterialUI and IBM Carbon Svelte

Update 2021: Svelte Materialify