The Comprehensive Bulma UI Framework for React

by React

rbx

rbx is a comprehensive library of React components for Bulma 0.7.2.

View Documentation

To Install

npm install rbx or yarn add rbx

To Use

import "rbx/index.css";
import React from "react";
import { Columns } from "rbx";

export const MyPage = () => (
  <Columns>
    <Columns.Column>First Column</Columns.Column>
    <Columns.Column>Second Column</Columns.Column>
    <Columns.Column>Third Column</Columns.Column>
    <Columns.Column>Fourth Column</Columns.Column>
  </Columns>
);

To customize Bulma (including colors), follow the instructions below.

Library

All components support ref-forwarding, and are able to render as any other React Component Type you want to provide, by using the special prop as.
For example, to render a Button component as a react-router Link:

import { Button } from "rbx";
import { Link } from "react-router-dom";

export const goHomeLink = (
  <Button as={Link} to="/home" color="primary" text>
    Go home
  </Button>
);

Customize Bulma

To override the variables set by Bulma, install Bulma (npm install bulma@0.7.2), and follow the Bulma instructions.

You will also need to import rbx/dist/rbx.sass as it contains any pertinent bug fixes for Bulma.

A minimal example of App.sass might look like:

$primary: #61dafb

@import "~rbx/dist/index.sass"

Or, for further customization;

$primary: #61dafb

@import "~bulma/bulma.sass" // alternatively, select which parts to include.
@import "~rbx/dist/rbx.sass"

Then, import this file somewhere in your project.

Create React App

Create React App 2 supports SASS compilation out of the box.

To get started, please follow the official instructions to enable this feature.

Then, create a SASS file in your project (as described above):

Finally, import this stylesheet somewhere in your CRA app.

import "./App.sass";

GitHub