Bulma components for Svelte

svelte, svelte.js, sveltejs, bulma, component, components
npm install svelma-enhanced@0.4.6



Svelma is a set of UI components for Svelte based on the Bulma CSS framework. Some features are experimental and are being developed. Pull requests are welcome. Forked from


See documentation and demo here


1. Install svelma and dependencies via npm

yarn add bulma svelma-enhanced
yarn add -D node-sass svelte-preprocess rollup-plugin-postcss

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>

You can customize Bulma to suit your branding:

  1. Create SASS/SCSS file, say app.scss, and add it to App.svelte
  2. Import required SASS files from Bulma in app.scss
  3. Override SASS/SCSS variables

4. Install Font Awesome icons

Fontawesome Webfonts come with certain side effects and so SVG Icons are recommended for use with svelte.

# add SVG icons
yarn add -D @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

Add fontawesome to your App. The following will add all icons, but you can also add SVG icons selectively if you wanted to make you app a lot smaller.

<!-- App.svelte -->
  import 'bulma/css/bulma.css';

  // add all fontawesome icons
  import { library } from '@fortawesome/fontawesome-svg-core';
  import { fas } from '@fortawesome/free-solid-svg-icons';
  import { far } from '@fortawesome/free-regular-svg-icons';
  import { fab } from '@fortawesome/free-brands-svg-icons';
  library.add(fab, fas, far);

Alternatively, you shall also use a link tag in your index.html using a CDN, or use webfonts but this is not recommended.


If you are doing Server-Side Rendering (SSR) with Sapper, 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';          // Use this
// import { Button } from 'svelma';                                // Don't use this


See attached Licence