10 Popular Svelte UI Components

Find your favorite CSS framework for your Svelte project

Created using Teffects bubble by the author.

[Update: 2022–3–2 Added Flowbite-Svelte]

Table of Contents
· Introduction
· Flowbite-Svelte
  ∘ Flowbite-Svelte references
· Svelte Material UI
  ∘ Svelte Material UI GitHub summary
  ∘ Quick start
  ∘ Svelte Material UI references
· Carbon Components Svelte
  ∘ Carbon Components Svelte GitHub summary
  ∘ Quick start
  ∘ Carbon Components Svelte references
· Smelte
  ∘ Smelte GitHub summary
  ∘ Quick start
  ∘ Smelte references
· Sveltestrap
  ∘ Sveltestrap GitHub summary
  ∘ Quick start
  ∘ Sveltestrap references
· Svelma
  ∘ Svelma GitHub summary
  ∘ Quick start
  ∘ Svelma references
· Attractions
  ∘ Attractions GitHub summary
  ∘ Quick start
  ∘ Attractions references
· Svelte-mui
  ∘ Svelte-mui GitHub summary
  ∘ Quick start
  ∘ Svelte-mui references
· Svelte-chota
  ∘ Svelte-chota GitHub summary
  ∘ Quick start
  ∘ Svelte-chota references
· Framework7 Svelte
· Conclusion
· Updates

Introduction

A 2021 Stackoverflow survey found that Svelte is the most loved web framework for developers. It is easy to learn and beginner-friendly. Svelte compiles your code into tiny, framework-less vanilla JS that makes your app fast and reactive.

In this article, you will find the ten most popular Svelte UI components that you can use for your next projects.

Flowbite-Svelte

Disclaimer: I’m the author of Flowbite-Svelte.

Flowbite-Svelte is an official Flowbite component library for Svelte. Flowbite is the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS. Flowbite-Svelte has more than 100 components including dark-mode, buttons, modals, cards, navbar, accordions, alerts, tabs, and more.

Getting started page shows you how to install Flowbite-Svelte.

Flowbite-Svelte references

Svelte Material UI

Svelte Material UI is based on Material Design Components. It has full TypeScript support, arbitrary attributes to all of the components, actions to the components, and more.

Svelte Material UI GitHub summary

Quick start

# Install the packages you need
npm install --save-dev @smui/top-app-bar
npm install --save-dev @smui/button
npm install --save-dev @smui/card
# only for SvelteKit
# npm install --save-dev smui-theme

Import them in the script tag:

<script>
  import TopAppBar, { Row, Section, Title } from '@smui/top-app-bar';
  import Button from '@smui/button';
  import Card, { Content, Actions } from '@smui/card';
</script>

This REPL example shows you how to add a TopAppBar, Textfield, and Card components.

Svelte Material UI references

Carbon Components Svelte

Carbon Components Svelte is based on Carbon Design System, an open-source design system by IBM.

It includes 7000+ icons, 700+ pictograms, 20+ charts (powered by d3), and more.

Carbon Components Svelte GitHub summary

Quick start

Install it:

$ yarn add -D carbon-components-svelte
# or
$ npm i -D carbon-components-svelte
# or
pnpm i -D carbon-components-svelte

Carbon components Svelte offers 2 light and 3 dark themes. (White, Gray 10, Gray 80, Gray 90, and Grey 100).

Method 1: CSS Stylesheet

In a svelte file:

<script>
  //use one from white|g10|g80|g90|g100  
  import "carbon-components-svelte/css/white.css"; 
</script>

Method 2: CDN

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/carbon-components-svelte/css/white.css"
    />
  </head>
</html>

svelte:head

<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/carbon-components-svelte/css/white.css"
  />
</svelte:head>

Carbon Components Svelte references

Smelte

Smelte is built on top of Tailwind CSS using Material Design spec. It offers many components and utility functions.

Smelte GitHub summary

Quick start

$ npm install smelte
# or
$ yarn add smelte

Add the following to rollup.config.js.

const smelte=require("smelte/rollup-plugin-smelte");

plugins=[ 
  ...your plugins, 
  smelte({ 
    purge: production,
    output: "public/global.css", // it defaults to static/global.css which is probably what you expect in Sapper 
    postcss: [], // Your PostCSS plugins
    whitelist: [], // Array of classnames whitelisted from purging
    whitelistPatterns: [], // Same as above, but list of regexes
    tailwind: { 
      colors: { 
        primary: "#b027b0",
        secondary: "#009688",
        error: "#f44336",
        success: "#4caf50",
        alert: "#ff9800",
        blue: "#2196f3",
        dark: "#212121" 
      }, // Object of colors to generate a palette from, and then all the utility classes
      darkMode: true, 
    }, 
    // Any other props will be applied on top of default Smelte tailwind.config.js
  }),
]

Add the following to the main.js.

import "smelte/src/tailwind.css";

If you need to use material icons add the following:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

In your component, import necessary Smelte components:

import Button from "smelte/src/components/Button";
import Treeview from "smelte/src/components/Treeview";

See more details in

Smelte references

Sveltestrap

Sveltestrap provides all Bootstrap 5 CSS framework components for Svelte V3.

Sveltestrap GitHub summary

Quick start

npm install --save svelte sveltestrap

Bootstrap 5 components doesn’t include Bootstrap 5 stylesheet. You need to include it using one of the following:

Method 1: HTML

<head>
  <link
    rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  />
</head>

Method 2: In App.svelte

<svelte:head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</svelte:head>

Method 3: In a component

<style>
  @import "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css";
</style>

Now you can use sveltestrap components in your components:

<script>
  import { Button, Col, Row } from 'sveltestrap';
</script>

<Row>
  <Col>
    <Button color="primary" outline>Hello World!</Button>
  </Col>
</Row>

Sveltestrap references

Svelma

Svelma is based on Bulma CSS frame work. This library is still a work-in-progress as of Nov 20, 2021.

Svelma GitHub summary

Quick start

$ npm install --save bulma svelma
$ npm install node-sass svelte-preprocess rollup-plugin-postcss --save-dev

Add rollup-plugin-postcss to rollup.config.js:

// rollup.config.js
import postcss from 'rollup-plugin-postcss'
import preprocess from 'svelte-preprocess'

// ...

export default {
  // ...
  plugins: [
    svelte({
      // ...
      preprocess: preprocess()
    }),

    postcss(),
  }
}

In your component:

<!-- App.svelte -->
<script>
  import 'bulma/css/bulma.css'
  import { Button } from 'svelma'
</script>

<button type="is-primary">I'm a Button!</button>

Svelma references

Attractions

Attractions is a stylish and functional UI kit for Svelte. It weighs only 239 KB and is tree-shaking-enabled. It works with SASS and accessibility is included.

Attractions GitHub summary

Quick start

Install attractions:

npm install --save-dev attractions
# -- or --
yarn add --dev attractions
# -- or --
pnpm add --save-dev attractions

Also, you need to install svelte-preprocess, sass, postcss.

npm install --save-dev svelte-preprocess sass postcss
# -- or --
yarn add --dev svelte-preprocess sass postcss
# -- or --
pnpm add --save-dev svelte-preprocess sass postcss

Add svelte-preprocess to rollup.config.js:

import sveltePreprocess from 'svelte-preprocess';

export default {
  // ...,
  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
    }),
  ],
};

Use it in a component:

<script>
  import { Button } from 'attractions';
</script>

<Button>click me</Button>

Attractions references

Svelte-mui

Svelte-mui is inspired by Material Design and it has ~30KB mini-zipped. The last update was 10 months ago.

Svelte-mui GitHub summary

Quick start

Install svelte-muk:

$ npm install --save-dev svelte-mui

Use it in components:

<Textfield bind:value filled label="Name" message="Enter your name" />

<h1>Hello {value}!</h1>

<script>
    // import any components you want
    import { Textfield } from 'svelte-mui';

    let value = 'world';
</script>

Svelte-mui references

Svelte-chota

Svelte-chota is based on Chota CSS framework. Chota is a super lightweight CSS framework. Minified files is just ~3kb. The last update was 4 months ago.

Svelte-chota GitHub summary

Quick start

Method 1 Import CSS file

$ npm install --save-dev chota svelte-chota

In your root component (App.svelte):

<script>
    import 'chota';
</script>

Method 2 Using CDN

$ npm install --save-prod svelte-chota

Import styles in your component:

<style>
    @import "https://unpkg.com/chota@latest";
</style>

Svelte-chota references

Framework7 Svelte

I recently found that Framework7 has a whole section on Svelte. You can find a HackerNews clone powered by Framework7 and Svelte. Framework7 Svelte provides all components from App to Virtual List.

If you already know Framework7, this might be the way to go.

Conclusion

You can start with a UI component that you are familiar with or learn a new CSS framework. Svelte makes it easy for you to start using a template or SvelteKit.

You can explore different UI kits on the Svelte Society page if you can’t find something you like.

Since Svelte compiles your files and deploys without a framework it has excellent performance compared to React, Vue, and Angular.

It is easy to learn and beginner-friendly for programmers.

If you know other Svelte UI components, please let me know.

Updates

2022–2–7 Svelte-flow
2022–1–6 Framework7

Get full access to every story on Medium by becoming a member.

If you prefer getting an email whenever I publish an article, please sign up here.