Svelma is a set of UI components for Svelte based on the Bulma CSS framework.

Change Log


See docs + demos site here

Quick Start

1. Import svelma and dependencies via npm to your project

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

2. Add the postcss plugin to your rollup config

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

// ...

export default {
  // ...
  plugins: [
      // ...
      preprocess: preprocess()


3. Import Bulma's CSS and Svelma components

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

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

4. Include Font Awesome icons

From CDN in your HTML page:

<link rel="stylesheet" href="" />

Or as an npm package imported into your root component:

$ npm install --save @fortawesome/fontawesome-free

<!-- App.svelte -->
  import 'bulma/css/bulma.css'
  import '@fortawesome/fontawesome-free/css/all.css'


If you are doing server-side rendering with Sapper (or SvelteKit), you'll need to import the .svelte files directly so that your app can compile them, rather than importing from the compiled module.


import Button from 'svelma/src/components/Button.svelte'

instead of

import { Button } from 'svelma'


Much thanks to the Buefy and Svelma2 projects! It provided the inspiration and lots of code examples for this version of Svelma.

Top categories

Loading Svelte Themes