React Bulma components library - TypeScript-first component library for Bulma CSS framework. Build accessible, modern UIs with fully-typed React components.

A modern, flexible React component library built with the latest Bulma v1 and TypeScript.

Looking for full documentation, guides, API references, and best practices?
👉 Visit our official docs at https://bestax.io

The documentation site is the best place to learn about all bestax-bulma features, usage patterns, and updates. We strongly recommend using the docs as your primary resource!

npm install @allxsmith/bestax-bulma
# or
yarn add @allxsmith/bestax-bulma

You must include Bulma’s CSS in your project. The easiest way is to import it in your main JS/TS file:

import 'bulma/css/bulma.min.css';

Or add it via CDN in your HTML:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"
/>

Many components work well with icons. We recommend Font Awesome:

npm install @fortawesome/fontawesome-free

And then import in your code as needed.

Here’s how to use the Button component:

import React from 'react';
import { Button } from '@allxsmith/bestax-bulma';
import 'bulma/css/bulma.min.css';

function App() {
  return (
    <div>
      <Button color="primary" onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

export default App;

• Ultra-lightweight: Only 21KB gzipped ✨ 3-20x smaller than most popular React UI libraries (which range from 60-500KB+ gzipped)
• Supports the latest Bulma v1.x Other React Bulma libraries are stuck on Bulma 0.9.4 — bestax-bulma is built for the future.
• Zero external dependencies Clean install, smaller bundle, fewer security concerns.
• 99% unit test coverage Rigorously tested for reliability and stability.
• 100% TypeScript Full type safety for you and your team.
• 100% Bulma Implementation Complete bulma implementation.
• Active developer support Issues? Questions? PRs? Get fast responses and real improvements.

View the package on npmjs:
👉 https://www.npmjs.com/package/@allxsmith/bestax-bulma

For full documentation, guides, and best practices, please use our official docs site:

👉 https://bestax.io

Always refer to the documentation site first:
It’s the most complete and up-to-date source for everything bestax-bulma!

Explore live, interactive component examples in our Storybook:

👉 https://bestax.io/storybook

bestax-bulma is built on top of the incredible @jgthms/bulma CSS framework.

If you find Bulma useful, please consider sponsoring Jeremy Thomas to support the continued development of Bulma.

Note: We are not affiliated with Bulma or Jeremy Thomas in any way...We’re just big fans of the Bulma framework!

Want to contribute to bestax-bulma or run the project locally? See CONTRIBUTING.md

Pull requests and issues are welcome!
See individual package READMEs for more details.

• The Bulma CSS framework is © Jeremy Thomas and licensed under the MIT License.
• Some example content and documentation in this site is adapted from the Bulma website (CC BY-NC-SA 4.0), © Jeremy Thomas.

See Bulma’s license page for more details.

MIT © Alex Smith