How to use Bulma CSS in React

Hello dev, In today section we will see how to install & setup Bulma css in react using vite tools and typescript. To add bulma css in react we will use React components for Bulma framework.

Install Bulma CSS in React js

create react project via vite tool.

With NPM:

npm create vite@latest

With Yarn:

yarn create vite

With PNPM:

pnpm create vite

Next you need to give project name and select react project.

✔ Project name: … bulma-reactjs
? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
❯  react
  preact
  lit
  svelte

Now select typescript.

✔ Project name: … bulma-reactjs
✔ Select a framework: › react
? Select a variant: › - Use arrow-keys. Return to submit.
  react
❯  react-ts

Move to project and install node dependencies.

cd bulma-reactjs
npm install
npm run dev

Install React Bulma Components

With NPM:

npm install react-bulma-components

With Yarn:

yarn add -E react-bulma-components

Now import import 'bulma/css/bulma.min.css'; in main.tsx.

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// import './index.css'
import 'bulma/css/bulma.min.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

App.tsx

import { useState } from 'react';

import { Button } from 'react-bulma-components';

function App() {
  return (
    <div className="App has-text-centered">
      <div className="mt-5">
        <Button color="primary">Primary Button</Button>
        <Button color="success">Success Button</Button>
        <Button color="danger">My Bulma button</Button>
      </div>
      <div className="mt-4">
        <button className="button is-primary is-light">Primary</button>
        <button className="button is-link is-light">Link</button>
        <button className="button is-info is-light">Info</button>
        <button className="button is-success is-light">Success</button>
        <button className="button is-warning is-light">Warning</button>
        <button className="button is-danger is-light">Danger</button>
      </div>
    </div>
  );
}

export default App;

react bulma css install

Run the server.

npm run dev