DEV Community

Cover image for How to use Bulma CSS in React
frontendshape
frontendshape

Posted on • Originally published at frontendshape.com

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.
view

Install Bulma CSS in React js

create react project via vite tool.
With NPM:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

With Yarn:

yarn create vite
Enter fullscreen mode Exit fullscreen mode

With PNPM:

pnpm create vite
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now select typescript.

 Project name:  bulma-reactjs
 Select a framework:  react
? Select a variant:  - Use arrow-keys. Return to submit.
  react
  react-ts
Enter fullscreen mode Exit fullscreen mode

Move to project and install node dependencies.

cd bulma-reactjs
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Install React Bulma Components
With NPM:

npm install react-bulma-components
Enter fullscreen mode Exit fullscreen mode

With Yarn:

yarn add -E react-bulma-components
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

react bulma css install

Run the server.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Discussion (0)