DEV Community

Cover image for Meet bestax-bulma: Modern React Components for Bulma CSS v1
Alex Smith
Alex Smith Subscriber

Posted on • Edited on • Originally published at bestax.io

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

#react #typescript #webdev #bulma

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

Then import and use components:
Welcome bestax-bulma 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>
  );
}
Enter fullscreen mode Exit fullscreen mode

🚀 Try this live on StackBlitz →

Showcasing Bulma v1's New Features

🦴 Skeleton Loading States

Bulma v1 introduced the Skeleton component for beautiful loading states.

First you will see a pulsing skeleton:
Loading Skeleton

Then the skeleton is replaced with the content:
Loaded, skeleton replaced with content

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

🚀 Try this live on StackBlitz →

🎨 CSS Grid Support

Take advantage of Bulma's new CSS Grid components for modern layouts:
Bestax-bulma Grid example

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

🚀 Try this live on StackBlitz →

🌈 Dynamic HSL Theming

Bulma v1's HSL color system enables dynamic theming:
Bestax-bulma theming example

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

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

🚀 Try this live on StackBlitz →

Why Developers Love bestax-bulma

1. Compound Components Pattern

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

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

🚀 Try this live on StackBlitz →

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

3. 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 with Alternatives

Feature bestax-bulma react-bulma-components rbx bulma-react
Bulma v1 Support ✅ ❌ ❌ ❌
TypeScript ✅ Built-in ⚠️ Separate ✅ ❌
Test Coverage 99% ~70% ~100% Unknown
Active Maintenance ✅ 2025 ⚠️ 2021 ❌ 2019 ❌ 2015
Tree Shaking ✅ ✅ ✅ ❌
Compound Components ✅ ❌ ✅ ❌
Comprehensive Docs ✅ ❌ ⚠️ Partial ❌
Real CSS Grids ✅ ❌ ❌ ❌
Configurable ✅ ❌ ❌ ❌
Theme Support ✅ ❌ ❌ ❌
Quick Start CLI ✅ ❌ ❌ ❌

Get Started Today

Ready to modernize your Bulma React experience?

  • Install: npm install @allxsmith/bestax-bulma bulma
  • Explore: Check our documentation
  • Build: Start creating beautiful UIs with modern React patterns
  • 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

👤 Follow me @allxsmith for updates!

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

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

Originally published on bestax.io

Top comments (0)