Meet bestax-bulma: Modern React Components for Bulma CSS v1 | Bestax-Bulma

· 4 min read

Welcome to Bestax

Hey React developers! 👋 Are you looking for a modern, actively maintained component library for Bulma CSS? Let me introduce you to bestax-bulma (pronounced “bee-stacks”), a TypeScript-first React component library that brings the full power of Bulma v1 to your React applications.

Opensource! Free as in beer🍺

Why Another Bulma React Library?

Great question! While there are other Bulma React libraries out there, many haven’t been updated for Bulma v1 or are no longer actively maintained. bestax-bulma fills this gap with:

• 🎯 Full Bulma v1 Support: Built specifically for the latest Bulma version
• 📊 99% Test Coverage: Every component thoroughly tested with React Testing Library
• 🔷 TypeScript-First: Complete type safety with comprehensive TypeScript definitions
• 🚀 Modern Build: Tree-shakeable ESM and CJS builds for optimal bundle sizes
• 📚 Rich Documentation: Comprehensive API docs and getting started guides available at bestax.io
• ⚡ Active Development: Regular updates and responsive maintenance

Quick Start in 2 Minutes

Getting started is as simple as:

npm install @allxsmith/bestax-bulma bulma

Then import and use components:

Welcome with Hero with Card Example

import { Button, Card, Hero } from '@allxsmith/bestax-bulma';
import 'bulma/css/bulma.min.css';

function App() {
  return (
    <Hero color="primary">
      <Hero.Body>
        <Card>
          <Card.Header>
            <Card.Header.Title>Welcome to bestax-bulma!</Card.Header.Title>
          </Card.Header>
          <Card.Content>
            <p>Modern React components for Bulma CSS v1</p>
            <Button color="success">Get Started</Button>
          </Card.Content>
        </Card>
      </Hero.Body>
    </Hero>
  );
}

🚀 Try this live on StackBlitz → https://stackblitz.com/github/allxsmith/bestax-stackblitz-welcome-to-bestax

Showcasing Bulma v1’s New Features

🦴 Skeleton Loading States

Bulma v1 introduced the Skeleton component for beautiful loading states.

Pictures don’t do justice. Below would be a pulsing skeleton:

Pulsing Skeleton Loader (like a spinner)

import { Card } from '@allxsmith/bestax-bulma';
import { useState, useEffect } from 'react';

function LoadingCard() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const timer = setInterval(() => {
      setIsLoading(prev => !prev);
    }, 2000);
    return () => clearInterval(timer);
  }, []);

  return (
    <Card skeleton={isLoading}>
      <Card.Content>
        <p>Your content here!</p>
      </Card.Content>
    </Card>
  );
}

When done loading, the skelton would be replaced with the content:

Done loading, skeleton disapeers, showing content

🚀 Try this live on StackBlitz → https://stackblitz.com/github/allxsmith/bestax-stackblitz-welcome-to-bestax-skeleton**)

🎨 CSS Grid Support

Take advantage of Bulma’s new CSS Grid components for modern layouts:

Bulma V1, real CSS Grid support

import { Grid, Cell, Card } from '@allxsmith/bestax-bulma';

function Dashboard() {
  return (
    <Grid>
      <Cell>
        <Card>Cell 1</Card>
      </Cell>
      <Cell>
        <Card>Cell 2</Card>
      </Cell>
      <Cell>
        <Card>Cell 3</Card>
      </Cell>
      <Cell>
        <Card>Cell 4</Card>
      </Cell>
      <Cell>
        <Card>Cell 5</Card>
      </Cell>
      <Cell>
        <Card>Cell 6</Card>
      </Cell>
      <Cell>
        <Card>Cell 7</Card>
      </Cell>
      <Cell>
        <Card>Cell 8</Card>
      </Cell>
      <Cell>
        <Card>Cell 9</Card>
      </Cell>
    </Grid>
  );
}

🚀 Try this live on StackBlitz → (https://stackblitz.com/github/allxsmith/bestax-stackblitz-welcome-to-bestax-grid**))

🌈 Dynamic HSL Theming

Bulma v1’s HSL color system enables dynamic theming:

Unique themeing that Bestax provides with Bulma v1

import { Theme, Button } from '@allxsmith/bestax-bulma';

function ThemedApp() {
  return (
    <Theme primaryH="280" primaryS="100%" primaryL="45%">
      <Button color="primary">Themed Button</Button>
    </Theme>
  );
}

🚀 Try this live on StackBlitz → (https://stackblitz.com/github/allxsmith/bestax-stackblitz-welcome-to-bestax-theme)**)

Why Developers Love bestax-bulma

Compound Components Pattern

We use the compound components pattern for intuitive, readable code:

Bestax supports component component expressions

import { Modal, Button } from '@allxsmith/bestax-bulma';
import { useState } from 'react';

function ModalExample() {
  const [showModal, setShowModal] = useState(false);
  const closeModal = () => setShowModal(false);

  return (
    <>
      <Button color="primary" onClick={() => setShowModal(true)}>
        Open Modal
      </Button>
      <Modal isActive={showModal}>
        <Modal.Background onClick={closeModal} />
        <Modal.Card>
          <Modal.Card.Head>
            <Modal.Card.Title>Intuitive API</Modal.Card.Title>
            <Modal.Close onClick={closeModal} />
          </Modal.Card.Head>
          <Modal.Card.Body>Components that make sense!</Modal.Card.Body>
          <Modal.Card.Foot>
            <Button color="primary" onClick={closeModal}>
              Close
            </Button>
          </Modal.Card.Foot>
        </Modal.Card>
      </Modal>
    </>
  );
}

🚀 Try this live on StackBlitz → (https://stackblitz.com/github/allxsmith/bestax-stackblitz-welcome-to-bestax-compound-components)

TypeScript Autocomplete Heaven

Every prop is fully typed, giving you incredible IDE support:

// Full autocomplete for colors, sizes, and more
<Button
  color="primary"  // 'primary' | 'link' | 'info' | 'success' | ...
  size="large"     // 'small' | 'normal' | 'medium' | 'large'
  isLoading
  isOutlined
/>

Zero Configuration

Unlike many CSS-in-JS solutions, bestax-bulma works with standard Bulma CSS. No build configuration, no CSS extraction, just import and go!

Try It Live

Want to see bestax-bulma in action? Check out bestax.io for comprehensive examples and interactive documentation. Storybook is also available for browsing individual component variations.

Comparison of React Bulma Libraries

📦 bestax-bulma

• Bulma v1 Support: ✅
• TypeScript: ✅ Built-in
• Test Coverage: 99%
• Active Maintenance: ✅ 2025
• Tree Shaking: ✅
• Compound Components: ✅
• Comprehensive Docs: ✅
• Real CSS Grids: ✅
• Configurable: ✅
• Theme Support: ✅
• Quick Start CLI: ✅

📦 react-bulma-components

• Bulma v1 Support: ❌
• TypeScript: ⚠️ Separate
• Test Coverage: ~70%
• Active Maintenance: ⚠️ 2021
• Tree Shaking: ✅
• Compound Components: ❌
• Comprehensive Docs: ❌
• Real CSS Grids: ❌
• Configurable: ❌
• Theme Support: ❌
• Quick Start CLI: ❌

📦 rbx

• Bulma v1 Support: ❌
• TypeScript: ✅
• Test Coverage: ~100%
• Active Maintenance: ❌ 2019
• Tree Shaking: ✅
• Compound Components: ❌
• Comprehensive Docs: ❌
• Real CSS Grids: ❌
• Configurable: ❌
• Theme Support: ❌
• Quick Start CLI: ❌

📦 bulma-react

• Bulma v1 Support: ❌
• TypeScript: ❌
• Test Coverage: Unknown
• Active Maintenance: ❌ 2015
• Tree Shaking: ❌
• Compound Components: ❌
• Comprehensive Docs: ❌
• Real CSS Grids: ❌
• Configurable: ❌
• Theme Support: ❌
• Quick Start CLI: ❌

Get Started Today

Ready to modernize your Bulma React experience?

1. Install: npm install @allxsmith/bestax-bulma bulma
2. Explore: Check our documentation
3. Build: Start creating beautiful UIs with modern React patterns
4. Contribute: Join us on GitHub

What’s Next?

This is just the beginning! In the next parts of this series, we’ll dive deep into:

• Part 2: Building Beautiful UIs with Bestax Components
• Part 3: Forms, Data Display, and Advanced Patterns

Have questions or feedback? Create an issue or start a discussion on GitHub for new ideas!

Follow me @allxsmith for updates!

⭐ Feel free to star the repository if you find it helpful!

Originally published at https://bestax.io on September 24, 2025.