TypeScript icon, indicating that this package has built-in type declarations

2.9.0 • Public • Published

Reactive Bulma

Component library based on React, Bulma, Typescript and Rollup

Table of contents


After studying an Udemy course about Typescript, I wanted to start a new project to practice my new knowledge in a meaningful tool. Therefore, I started this project to understand how to create a component library and investigate the best ways to maintain and nourish it as any professional-level alternatives.


Npm Version Npm Bundle Size Npm Downloads Netlify Status Code Coverage Quality Gate Status Maintainability Rating Security Rating Technical Debt Known Vulnerabilities GitHub Repo stars GitHub commit activity GitHub last commit Semantic Commits Contributor Covenant


react dependency bulma dependency material design dependency typescript dependency rollup dependency postcss dependency storybook dependency semantic release dependency babel dependency jest dependency react testing library dependency lint-staged dependency prettier dependency eslint dependency husky dependency hygen dependency

Quick start

Several quick start options are available:

  • Clone the repo: git clone
  • Install with npm: npm install reactive-bulma@latest
    • Before cloning this repo, I recommend installing Node >=18 to install packages.

Folder structure

In case you have cloned the repo, it will show you the following folders:

  • _templates: Dedicated to Hygen configuration and implementation files. Dedicated to create new components from customizable templates
  • .github: Github Actions files used to run post-merge.commits like unit test coverage collection.
  • .husky: Dedicated to Husky configuration files.
  • .storybook: Dedicated to Storybook configuration files.
  • src:
    • components: Location of all used components, using Atomic Design hierarchy structure
      • atoms (from v1.0.0).
      • molecules (from v2.0.0).
      • organisms (from v3.0.0).
    • design: Location of common design tokens (coded on .mdx files) which are displayed above components sections in storybook's instance.
    • functions: Dedicated to parsers and helper functions for repetitive logic.
    • interfaces: Dedicated to interfaces used in components and functions typing.
    • types: Dedicated to Bulma's style type setting (which are part of component's properties).


Reactive bulma's documentation, included in this repo in the root directory, is built with Storybook and publicly hosted on Netlify at The docs may also be run locally.

Running documentation locally

  • Go to reactive-bulma folder (where you cloned the repo before).
  • Open a console and run npm install to install the Node.js dependencies, including Storybook (the site builder).
  • Run npm start.
  • Wait until a new tab opens with url http://localhost:6006/ in your browser.
    • In case you want to initiate it on the background, you can run npm run start:cli.

Learn more about Storybook by reading its documentation.

Learn more about Hygen by reading its documentation.


import React from 'react'
import { Button } from 'reactive-bulma'

const App = () => (
  <Button text="This is a test" />

To see all component's variants and its code snippets, go to Documentation section.

In case you want to create a custom component for your forked Reactive Bulma version, the easiest way is by running the creation script I made, which instructions are here.

How to create a template component

After some time, I understood that creating component files is a repetitive and time-consuming task, so I made issue #180 to implement a library called Hygen, whose function is to provide a way to generate templates for generic files that can consume time at the long term. You can run the script by the following steps:

  • Open a console and run npm run create in your console.
  • An will assistant will appear asking about how your component will be named. You can answer with text separated with spaces ( ), underscores (_), or hyphens (-)
  • Then, the assistant will ask in which folder you want to create it (based on its type following Atomic Design hierarchy structure)
  • At last, the script should create all base files to reduce time and focus on custom implementation.

How to update all dependencies

In case you wanted to make your own fork, I recommend you to updated at least weekly using a custom command npm run update, which will run the following commands in order:

  • update:deps: Using a npm-check-updates script, you will be able to choose which dependencies want to update to latest version
  • update:doctor: Will run a set of build and test checks in order to assure your update will not break any current build.
  • update:storybook: Will update storybook to lastest version (following its recommended command) followed for a build check (similar to update:doctor, but for storybook only)


After investigating semantic-release documentation (reffer to #3) and having a problematic implementation, I decided to change version meaning for this project with the following:

  • Major versions (1.0.0, 2.0.0 and beyond) will reffer to milestones/version achievement.
  • Minor versions (1.1.0, 1.2.0 and so on) will reffer to branch/story completition.
  • Patch versions (1.0.1, 1.0.2 and so on) will reffer to bugfixes only.

In case you are interested in check current project's status, you can go to Roadmap section.


Giving the mentioned release logic, main is the only static branch, and each developed feature or fix will have an unique branch with its PR and a merge commit following semantic versioning and semantic commits specifications.


Having in mind the versioning section, repo's status in a glance can be observed in this table.

Version Progress Open issues Closed issues
v1.0.0 v1.0.0, progress v1.0.0, open v1.0.0, closed
v2.0.0 v2.0.0, progress v2.0.0, open v2.0.0, closed
v3.0.0 v3.0.0, progress v3.0.0, open v3.0.0, closed
v4.0.0 v4.0.0, progress v4.0.0, open v4.0.0, closed

In case you want the short-term status, go to the project board (powered by GitHub Projects).

In case you want the detailed list of current and future features, go to the roadmap document.


The changelog (powered by semantic-release) is regularly updated to reflect what's changed in each new release.


If you're interested in contributing to Reactive Bulma, please read our contributing docs before submitting a pull request.


Bulma was beautifully crafted by @jgthms


Code released under the MIT License.

Package Sidebar


npm i reactive-bulma

Weekly Downloads






Unpacked Size

1.97 MB

Total Files


Last publish


  • nicolasomar