Newly Paranoid Maintainers


    0.4.8 • Public • Published


    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 This fork currently only has bug fixes.


    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, dom } 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 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';          // Use this
    // import { Button } from 'svelma';                                // Don't use this


    See attached Licence


    npm i svelma-enhanced

    DownloadsWeekly Downloads






    Unpacked Size

    94.8 kB

    Total Files


    Last publish


    • saravanabalagi