What's New​

UI Components (8)​

Form Components (6)​

Quick Start​

Installation​

Extra components are included in the main package:

npm install @allxsmith/bestax-bulma

CSS Setup​

Import the extras CSS after Bulma:

import 'bulma/css/bulma.min.css';
import '@allxsmith/bestax-bulma/dist/extras.css';

Basic Usage​

import { Switch, Slider, Toast, Steps } from '@allxsmith/bestax-bulma';

Feature Highlights​

Programmatic Notifications​

Toast and Dialog provide programmatic APIs for triggering notifications from anywhere:

import { toast, dialog } from '@allxsmith/bestax-bulma';

// Success toast
toast.success('Changes saved!');

// Toast with undo action
toast.show({
  message: 'Item deleted',
  actionText: 'Undo',
  actionType: 'info',
  onAction: () => restoreItem(),
});

// Confirmation dialog
const confirmed = await dialog.confirm({
  title: 'Delete?',
  message: 'This cannot be undone.',
  type: 'danger',
});

Controlled & Uncontrolled Modes​

All form components support both patterns:

// Controlled
const [value, setValue] = useState(50);
<Slider value={value} onChange={setValue} />

// Uncontrolled
<Slider defaultValue={50} />

Full Accessibility​

Every component includes:

• Proper ARIA attributes
• Keyboard navigation
• Screen reader support
• Focus management

Bulma Helper Props​

All components support Bulma's helper props system:

<Switch color="success" isRounded>
  Dark Mode
</Switch>

<Steps color="primary" size="medium">
  ...
</Steps>

Interactive Examples​

Switch​

function SwitchDemo() {
  const [enabled, setEnabled] = React.useState(false);
  return (
    <Switch
      checked={enabled}
      onChange={e => setEnabled(e.target.checked)}
      color="success"
      isRounded
    >
      Notifications: {enabled ? 'On' : 'Off'}
    </Switch>
  );
}

Slider​

function SliderDemo() {
  const [volume, setVolume] = React.useState(50);
  return (
    <div>
      <Slider
        value={volume}
        onChange={setVolume}
        showOutput
        color="primary"
        isRounded
      />
    </div>
  );
}

Steps​

function StepsDemo() {
  const [step, setStep] = React.useState(1);
  return (
    <Steps
      value={step}
      items={[
        { label: 'Cart', clickable: true },
        { label: 'Shipping', clickable: true },
        { label: 'Payment', clickable: true },
        { label: 'Complete', clickable: true },
      ]}
      onStepClick={setStep}
      color="success"
    />
  );
}

Documentation​

For complete documentation and more examples:

• Installation - Setup instructions (extras are bundled into bestax.css)
• UI Components - Toast, Dialog, Steps, etc.
• Form Components - Switch, Slider, Rate, etc.

What's Next​

We're continuing to expand bestax-bulma with more components and features. Coming soon:

• DateInput - Calendar date selection
• TimeInput - Time selection dropdown
• Colorpicker - Color selection with presets

Stay tuned for more updates!

Why?​

Previously, styling basic HTML elements required manual class management. Now you get full Bulma helper prop support on semantic HTML elements:

// Before: manual classes
<a href="#" className="has-text-primary">Link</a>

// After: props-based styling
<Link href="#" textColor="primary">Link</Link>

The Components​

Examples​

Styled Text​

<Paragraph textColor="info" textAlign="centered">
  Centered info text
</Paragraph>

Colored Lists​

<Content>
  <UnorderedList>
    <ListItem textColor="success">Green item</ListItem>
    <ListItem textColor="danger">Red item</ListItem>
  </UnorderedList>
</Content>

Figures with Captions​

<Figure textAlign="centered">
  <Image
    src="/img/bestax-solar-system-3d.png"
    alt="Bestax Solar System"
    size="16by9"
  />
  <Figure.Caption textColor="grey" textSize="7">
    Bestax Solar System
  </Figure.Caption>
</Figure>

Code Blocks​

<Pre bgColor="dark" textColor="white" p="4">
  {`const hello = "world";`}
</Pre>

Get Started​

import { Link, Paragraph, Code, Figure } from '@allxsmith/bestax-bulma';

Check out the Elements guide for full documentation.

Want to build a React app with Bulma CSS in 2025? Forget the 10-step tutorials. Skip the configuration hell. Just run one command and start coding.

One command. Under 30 seconds. You're building.

TL;DR - The Fastest Way​

npm create bestax@latest my-app

Wait, that's it?​

Okay there is one other thing, you have to install your dependencies and start the dev server.

cd my-app
npm install
npm run dev

That's it. You now have a production-ready React + Bulma application powered by Vite, with Javascript/TypeScript support, icon libraries, and the full power of @allxsmith/bestax-bulma at your fingertips.

Or, if you want even less interaction:

npm create bestax@latest my-app -y

The -y flag uses all the defaults and gets you up and running in literal seconds.

Want your AI agent to do it for you? Just tell Claude, ChatGPT, or your favorite coding assistant: "Use create-bestax to scaffold a new React + Bulma project" and watch it happen.

The Death of create-react-app​

Remember create-react-app? It was revolutionary when it launched. One command to bootstrap a React project with zero configuration. It democratized React development and became the de facto standard for years.

But in 2023, the React team deprecated it.

The ecosystem moved on. Webpack gave way to faster bundlers. The JavaScript landscape evolved. And developers were left asking: "So... what now?"

The answer isn't clear-cut anymore. You could use:

• Next.js (but that's for server-side rendering)
• Vite directly (but you need to configure the CSS and Icon framework yourself)
• Manual setup (do you really want to configure Babel, ESLint, and bundlers from scratch?)

This is where create-bestax comes in. It's the spiritual successor to create-react-app for developers who want React + a CSS framework, specifically Bulma, without the ceremony.

Why React, Bulma, and Vite?​

React: The King of Frontend Frameworks​

React remains the most popular frontend framework in 2025, and for good reason:

• Massive ecosystem: Libraries, tools, and solutions for every problem
• Component-driven: Build encapsulated, reusable UI pieces
• Declarative: Describe what you want, React handles the how
• Industry standard: More jobs, more tutorials, more community support
• Battle-tested: Used by Facebook, Netflix, Airbnb, and countless others

Whether you're building a simple dashboard or a complex application, React's flexibility and ecosystem make it the go-to choice.

Bulma: The CSS Framework Renaissance​

Bulma sits proudly as the third most popular CSS framework, behind Tailwind and Bootstrap. But here's the thing: Bulma v1 just changed the game.

The 2024 release of Bulma v1 brought:

• CSS Grid support: Modern layouts without fighting the framework
• HSL theming: Dynamic color customization with CSS variables
• Skeleton components: Built-in loading states
• Dark mode: First-class support out of the box
• Prefix support: Use Bulma alongside other frameworks without conflicts

This isn't your 2019 Bulma. This is a renaissance. Bulma is back, modernized, and ready for 2025.

Unlike Tailwind's utility-first approach (which some love, others find verbose), Bulma gives you semantic class names that are readable and maintainable. Unlike Bootstrap's JavaScript dependency, Bulma is pure CSS, giving you full control over behavior.

Vite: The Bundler of Choice in 2025​

If you're not using Vite in 2025, you're missing out. Period.

• Lightning fast: Cold starts in milliseconds, not seconds
• Instant HMR: See changes instantly during development
• Optimized builds: Production bundles that are lean and mean
• Modern by default: ES modules, code splitting, tree shaking
• Zero config: Works beautifully out of the box

Vite has become the de facto standard for modern web development, replacing Webpack for new projects. Every create-bestax project uses Vite, so you get that blazing-fast developer experience from day one.

Introducing @allxsmith/bestax-bulma​

At the heart of create-bestax is @allxsmith/bestax-bulma, a modern React component library built specifically for Bulma v1.

Why it's special:

• 99% test coverage: Every component thoroughly tested
• TypeScript-first: Complete type safety and autocomplete
• Feature-complete: All Bulma components as React components
• Global configuration: Use ConfigProvider for prefixed classes
• Dynamic theming: Runtime theme switching with CSS variables
• Comprehensive docs: Full API documentation and guides at bestax.io
• Active maintenance: Regular updates and responsive support

Unlike older Bulma React libraries that are abandoned or haven't updated for v1, bestax-bulma is actively maintained and built for the modern Bulma ecosystem.

The create-bestax Interactive Experience​

When you run npm create bestax@latest, you get a friendly interactive CLI that asks you exactly what you want:

1. Project Name​

? Project name: my-awesome-app

Simple. Straightforward. Uses validation to ensure your project name is npm-compatible.

2. Select Your Framework​

? Select a framework:
  ❯ Vite
    Vite + TypeScript

Choose JavaScript or TypeScript. Both use Vite for that incredible developer experience.

3. Choose Your Bulma Flavor​

? Which Bulma CSS flavor would you like to use?
  ❯ Complete (Recommended) - Full Bulma CSS with all components and helpers
    Prefixed - All classes prefixed with "bulma-" to avoid conflicts
    No Helpers - Core components only, no utility classes
    No Helpers, Prefixed - Core components only with "bulma-" prefix
    No Dark Mode - Light mode only, smaller bundle size

This is where create-bestax shines. Bulma v1 provides multiple CSS distributions, and create-bestax makes it trivial to choose the right one:

• Complete: The full Bulma experience (recommended for most projects)
• Prefixed: Need to use Bulma with Bootstrap or another framework? This prefixes all classes with bulma-
• No Helpers: Want a smaller bundle? Drop the utility classes
• No Helpers, Prefixed: Combination of the above
• No Dark Mode: If you only need light mode, save some bytes

4. Add an Icon Library​

? Would you like to add an icon library?
  ❯ None (I'll add icons later)
    Font Awesome
    Material Design Icons
    Ionicons
    Google Material Icons
    Material Symbols

Icons are essential for modern UIs. create-bestax automatically installs and configures your chosen icon library. No more hunting through documentation to figure out how to import CSS files correctly.

Command Line Options for Power Users​

Don't want to answer questions? Use flags:

# Create a TypeScript project with Font Awesome
npm create bestax@latest my-app -t vite-ts -i fontawesome

# Use all defaults
npm create bestax@latest my-app -y

# Prefixed Bulma with Material Design Icons
npm create bestax@latest my-app -b prefixed -i mdi

# Full control
npm create bestax@latest my-app -t vite-ts -b complete -i fontawesome

Available options:

• -t, --template <template>: vite or vite-ts
• -b, --bulma <flavor>: complete, prefixed, no-helpers, no-helpers-prefixed, no-dark-mode
• -i, --icon <library>: none, fontawesome, mdi, ionicons, material-icons, material-symbols
• -y, --yes: Skip all prompts

What You Get​

After running create-bestax, you get a fully configured project with:

• React with Vite for blazing-fast development
• Bulma CSS v1 in your chosen flavor
• @allxsmith/bestax-bulma component library pre-installed
• Icon library of your choice (optional)
• Sample components demonstrating bestax-bulma usage
• Development scripts ready to go
• Production build configuration
• TypeScript support (if you chose it)
• Zero configuration needed

Just run npm install && npm run dev and you're coding.

From Zero to Running in Under 30 Seconds​

Let's time it:

# Second 0-5: Scaffold the project
npm create bestax@latest my-demo-app -y

# Second 5-25: Install dependencies
cd my-demo-app
npm install

# Second 25-30: Start development server
npm run dev

Under 30 seconds from command to running application.

Compare that to:

1. Creating a Vite project manually
2. Installing React
3. Configuring React
4. Installing Bulma
5. Figuring out which Bulma CSS file to use
6. Installing bestax-bulma
7. Setting up icon libraries
8. Writing your first component

You just saved yourself 30 minutes to 2 hours of setup time.

For the AI-Assisted Developers​

In 2025, many of us use AI coding assistants. Claude Code, GitHub Copilot, ChatGPT, Cursor - they're all incredible tools.

Here's the beauty of create-bestax: Your AI can use it too.

Just tell your AI assistant:

"Create a new React + Bulma project using create-bestax with TypeScript and Font Awesome icons"

And watch it execute:

npm create bestax@latest my-project -t vite-ts -i fontawesome -y
cd my-project
npm install

No ambiguity. No configuration decisions. Just working code.

Get Started Today​

Ready to build something amazing?

1. Run the CLI: npm create bestax@latest my-app
2. Install dependencies: cd my-app && npm install
3. Start developing: npm run dev
4. Explore the docs: bestax.io
5. Star the repo: github.com/allxsmith/bestax

Support the Project​

Listen, I'll be honest with you. It's alot of work maintaining this entire ecosystem: the component library, the CLI, the documentation, the examples. I survive on a strict diet of GitHub stars and Diet Coke.

If create-bestax saved you time, please star the repository: github.com/allxsmith/bestax

It helps more developers discover the project, and it keeps me caffeinated and motivated to keep improving it.

What's Next?​

This is just the beginning of your journey with React, Bulma, and bestax-bulma. Here's what to explore next:

• Component Documentation: Browse all available components at bestax.io/docs/components
• Theming Guide: Learn how to customize your app's look with dynamic themes
• API Reference: Dive deep into component props and TypeScript types

Have questions? Open an issue or start a discussion on GitHub.

Want to contribute? PRs are always welcome! Check out the contributing guide.

View on npm: create-bestax on npm

Happy coding! Now stop reading and start building.

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

Then import and use components:

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>
  );
}

Showcasing Bulma v1's New Features​

🦴 Skeleton Loading States​

Bulma v1 introduced the Skeleton component for beautiful loading states:

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>
  );
}

🎨 CSS Grid Support​

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

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>
  );
}

🌈 Dynamic HSL Theming​

Bulma v1's HSL color system enables dynamic theming:

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

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

Why Developers Love bestax-bulma​

1. Compound Components Pattern​

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

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>
    </>
  );
}

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
/>

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​

Get Started Today​

Ready to modernize your Bulma React experience?

1. Install: npm install @allxsmith/bestax-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 Core 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!

This release introduces two major features that transform how you can customize and integrate Bulma components: ConfigProvider for global component configuration (including CSS class prefixing), and Theme for comprehensive CSS variable-based theming.

With ConfigProvider, you can now globally configure all bestax-bulma components using the useConfig hook, enabling seamless integration with other CSS frameworks through class prefixing. The new Theme component allows you to customize Bulma's appearance using CSS variables at both global and scoped nested levels, giving you unprecedented control over your design system.

ConfigProvider: Global Component Configuration​

The new ConfigProvider component addresses a critical need in modern web development: the ability to namespace CSS classes to avoid conflicts. This becomes especially important with Bulma v1's enhanced support for prefixed CSS classes.

Why We Need ConfigProvider​

When building applications, you may want to prefix your Bulma CSS classes with a custom namespace like "bulma-" or your own brand name. This provides better control over your CSS architecture and helps organize your styles. Bulma v1 recognized this need and now supports CSS class prefixing out of the box. While prefixing can also help in non-ideal situations where you need to integrate with other CSS frameworks like Bootstrap or Tailwind CSS, the primary benefit is having organized, namespaced CSS that follows your project's conventions.

The ConfigProvider enables you to:

• Prefix all Bulma CSS classes with a custom namespace (e.g., bulma-)
• Integrate seamlessly with other CSS frameworks
• Support custom Bulma builds with your own prefixes
• Maintain consistent configuration across your entire component tree

Supporting Prefixed Bulma CSS​

If you're using the official prefixed Bulma CSS file (bulma-prefixed.min.css), you can now use it seamlessly:

import { ConfigProvider, Box, Title, Button } from '@allxsmith/bestax-bulma';
import 'bulma/css/versions/bulma-prefixed.min.css';

function App() {
  return (
    <ConfigProvider classPrefix="bulma-">
      <Box>
        <Title>Prefixed Bulma Components</Title>
        <Button color="primary">This uses bulma-button class</Button>
      </Box>
    </ConfigProvider>
  );
}

This renders the following HTML with prefixed CSS classes:

<div class="bulma-box">
  <h1 class="bulma-title">Prefixed Bulma Components</h1>
  <p>
    All components inside this ConfigProvider will have their CSS classes
    prefixed with "bulma-". This allows you to use Bulma alongside other CSS
    frameworks without class name conflicts.
  </p>
  <button class="bulma-button bulma-is-primary">
    This uses bulma-button class
  </button>
</div>

Custom Prefix Support​

For teams building their own Bulma CSS with custom prefixes, you can configure your SASS build and use the same prefix in ConfigProvider:

Setup Bulma and SASS

npm install bulma sass

Create this custom Sass file

// In your SASS build
@use 'bulma/sass' with (
  $class-prefix: 'mycompany-'
);

Finally, import the custom Sass file into your react entry point

import { ConfigProvider, Box, Title, Button } from '@allxsmith/bestax-bulma';
import './styles/mycompany-bulma.scss';

function App() {
  return (
    <ConfigProvider classPrefix="mycompany-">
      <Box>
        <Title>Prefixed Bulma Components</Title>
        <Button color="primary">This uses bulma-button class</Button>
      </Box>
    </ConfigProvider>
  );
}

Two CSS Frameworks Example​

Here's a comprehensive example showing ConfigProvider in action with the less ideal situation: two css frameworks coexisting together.

function FrameworkIntegration() {
  return (
    <div>
      {/* Bootstrap section with equivalent markup */}
      <div className="card p-4 mb-4">
        <h4 className="card-title">Bootstrap Components</h4>
        <p className="card-text">
          This section uses Bootstrap classes for styling.
        </p>
        <button className="btn btn-info">Bootstrap Button</button>
      </div>

      {/* Prefixed Bulma components to avoid conflicts */}
      <ConfigProvider classPrefix="bulma-">
        <Box>
          <Title size="4">Prefixed Components</Title>
          <p>
            All components inside this ConfigProvider will have their CSS
            classes prefixed with "bulma-", preventing conflicts with other
            frameworks.
          </p>
          <Button color="primary">Prefixed Bulma Button</Button>
        </Box>
      </ConfigProvider>
    </div>
  );
}

Theme Component: CSS Variable-Based Theming​

The new Theme component leverages CSS custom properties (CSS variables) to provide dynamic, runtime theming capabilities that were previously only possible with SASS preprocessing. This approach offers significant advantages over traditional methods.

The Power of CSS Variables vs. SASS Variables​

While SASS variables are compile-time constants, CSS variables are runtime values that can be:

• Changed dynamically with JavaScript
• Inherited through the CSS cascade
• Scoped to specific DOM elements
• Modified without rebuilding your CSS

This means you can create themes that respond to user preferences, time of day, or any other runtime condition:

function DynamicTheming() {
  const [isLunar, setIsLunar] = useState(false);
  const [signees, setSignees] = useState([
    'John Adams',
    'Samuel Adams',
    'Benjamin Franklin',
  ]);

  const theme = React.useMemo(
    () => ({
      '--bulma-scheme-h': isLunar ? '260' : '220', // midnight: purple hue, sky: light blue hue
      '--bulma-scheme-s': isLunar ? '30%' : '90%', // midnight: muted saturation, sky: vibrant
      '--bulma-light-l': isLunar ? '8%' : '10%', // midnight: very dark, sky: very light
      '--bulma-dark-l': isLunar ? '85%' : '90%', // midnight: light text, sky: dark text
    }),
    [isLunar]
  );

  const handleSubmit = e => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const name = formData.get('name');
    if (name) {
      setSignees([...signees, name]);
      e.target.reset();
    }
  };

  return (
    <Theme bulmaVars={theme} isRoot>
      <Button onClick={() => setIsLunar(!isLunar)} mb="4">
        Toggle {isLunar ? 'Lunar' : 'Midnight'} Theme
      </Button>

      <Box>
        <Columns>
          <Column>
            <Content>
              <Title size="4">A Call to Action</Title>
              <p>
                <strong>Fellow Citizens,</strong> it is with great conviction
                that we present this petition to secure the blessings of liberty
                for ourselves and our posterity. As the immortal words of our
                founding documents declare, when a long train of abuses and
                usurpations evinces a design to reduce them under absolute
                despotism, it is their right, it is their duty, to throw off
                such government.
              </p>
              <p>
                The experience of ages has proven that mankind are more disposed
                to suffer, while evils are sufferable, than to right themselves
                by abolishing the forms to which they are accustomed. But when
                circumstances compel us to action, we must not hesitate to
                secure our fundamental rights.
              </p>
              <p>
                <em>
                  Join your fellow citizens in this righteous cause. Add your
                  name to this petition and let your voice be heard in the halls
                  of justice.
                </em>
                <p>
                  <cite>-- Alexander Hamilton</cite>
                </p>
              </p>
            </Content>
          </Column>

          <Column>
            <Box>
              <Title size="5">Sign the Petition</Title>
              <form onSubmit={handleSubmit}>
                <Field label="Full Name">
                  <Control>
                    <Input
                      name="name"
                      placeholder="Enter your full name"
                      required
                    />
                  </Control>
                </Field>
                <Field label="State">
                  <Control>
                    <Input name="state" placeholder="Your state of residence" />
                  </Control>
                </Field>
                <Field>
                  <Control>
                    <Button type="submit" color="primary">
                      Add My Signature
                    </Button>
                  </Control>
                </Field>
              </form>

              <Title size="6" mt="4">
                Current Signatories
              </Title>
              <Content>
                <ul>
                  {signees.map((name, index) => (
                    <li key={index}>{name}</li>
                  ))}
                </ul>
              </Content>
            </Box>
          </Column>
        </Columns>
      </Box>
    </Theme>
  );
}

CSS Variables vs. Utility Classes​

While utility classes like Tailwind CSS provide granular control, CSS variables offer superior theming capabilities:

• Semantic theming: Define color roles (primary, secondary) rather than specific colors
• Consistent relationships: Automatic hover/active states based on base colors
• Global consistency: Change one variable, update entire design system
• Performance: No class proliferation or CSS bloat

Global and Scoped Theming​

The Theme component supports both global theming (affecting your entire application) and scoped theming (affecting only specific sections):

Global Theme Example​

function GlobalSunsetTheme() {
  const sunsetTheme = React.useMemo(
    () => ({
      '--bulma-scheme-h': '18', // sunset orange hue
      '--bulma-scheme-s': '90%',
      '--bulma-primary-h': '25',
      '--bulma-primary-s': '85%',
      '--bulma-primary-l': '55%',
    }),
    []
  );

  function App() {
    return (
      <Box>
        <Title size="3">Contact Us</Title>
        <Field label="Name">
          <Control>
            <Input placeholder="Your full name" />
          </Control>
        </Field>
        <Field label="Email">
          <Control>
            <Input type="email" placeholder="your.email@example.com" />
          </Control>
        </Field>
        <Field label="Message">
          <Control>
            <Input placeholder="How can we help you?" />
          </Control>
        </Field>
        <Field>
          <Control>
            <Button color="primary">Send Message</Button>
          </Control>
        </Field>
      </Box>
    );
  }

  return (
    <Theme bulmaVars={sunsetTheme}>
      <App /> {/* Entire app uses sunset theme */}
    </Theme>
  );
}

Scoped Theme Example​

function ScopedTheming() {
  return (
    <div>
      <Title>Standard Theme Header</Title>

      <Block>
        <Theme primaryH="120" primaryS="100%" primaryL="40%">
          <Box>
            <Title size="4">Forest Green Section</Title>
            <Button color="primary">Green Button</Button>
          </Box>
        </Theme>
      </Block>

      <Block>
        <Theme primaryH="280" primaryS="100%" primaryL="45%">
          <Box>
            <Title size="4">Purple Section</Title>
            <Button color="primary">Purple Button</Button>
          </Box>
        </Theme>
      </Block>
    </div>
  );
}

Advanced Theming with Complete Color Schemes​

The Theme component supports all 500+ Bulma CSS variables, allowing for comprehensive design system customization:

function ForestTheme() {
  function CompleteApp() {
    return (
      <Hero size="medium">
        <Hero.Head>
          <Navbar>
            <Container>
              <Navbar.Brand>
                <Navbar.Item as="a">
                  <Title size="5">Forest Theme</Title>
                </Navbar.Item>
              </Navbar.Brand>
              <Navbar.Menu>
                <Navbar.End>
                  <Navbar.Item as="a">Getting Started</Navbar.Item>
                  <Navbar.Item as="a">Components</Navbar.Item>
                  <Navbar.Item as="a">Themes</Navbar.Item>
                  <Navbar.Item as="span">
                    <Button color="primary" isInverted>
                      Download
                    </Button>
                  </Navbar.Item>
                </Navbar.End>
              </Navbar.Menu>
            </Container>
          </Navbar>
        </Hero.Head>

        <Hero.Body>
          <Container textAlign="centered">
            <Title>Forest Green Design</Title>
            <SubTitle>Experience nature-inspired theming</SubTitle>
            <Button color="success" size="large">
              Explore Components
            </Button>
          </Container>
        </Hero.Body>

        <Hero.Foot>
          <Container>
            <Content textAlign="centered">
              <p>
                <strong>Forest Theme</strong> demonstrates comprehensive CSS
                variable theming.
              </p>
            </Content>
          </Container>
        </Hero.Foot>
      </Hero>
    );
  }

  return (
    <Theme
      schemeH="150" // forest green base
      schemeS="50%"
      lightL="80%"
      darkL="18%"
      primaryH="160"
      primaryS="60%"
      primaryL="45%"
      successH="120"
      warningH="45"
      dangerH="355"
      hoverBackgroundLDelta="4%"
      activeBackgroundLDelta="8%"
      isRoot
    >
      <CompleteApp />
    </Theme>
  );
}

Combining ConfigProvider and Theme​

The real power comes from combining both providers for maximum flexibility. Okay maybe not real power per se...

function EnterpriseApp() {
  return (
    <ConfigProvider classPrefix="mycompany-">
      <Theme primaryH="210" primaryS="100%" primaryL="45%" isRoot>
        <App />
      </Theme>
    </ConfigProvider>
  );
}

Summary: Full Bulma v1 Support​

With version 2.0.0, @allxsmith/bestax-bulma now fully supports the modern concepts introduced in Bulma v1, the latest version of Bulma in 2025. Our implementation provides:

• Complete CSS variable theming with 500+ supported variables
• Class prefix configuration for framework integration
• Runtime theme switching capabilities
• Scoped and global theming options
• TypeScript-first design with full type safety

We're committed to continuing our support for Bulma as it evolves, and you can expect new modular configuration options in future releases of this package.

The foundation we've built with ConfigProvider and Theme components will serve as the basis for even more powerful customization features to come.

Whether you're building a simple website or a complex enterprise application, @allxsmith/bestax-bulma now provides the tools you need to create consistent, themeable, and maintainable user interfaces that leverage the full power of modern CSS.

The first release is published under @allxsmith/bestax-bulma.

Checkout our storybook, it has complete examples.

Shortly, we will eventually have live examples in this docusaurus site.

Eventually we'll start weaving in code examples with react-live for super cool live examples.

• Delete
• Icon
• Image
• Notication
• Progress bars

Checkout the storybook stories for examples.

I decided to continue working on creating components before "working on generating markdown as part of the builds". I promise, it's coming, just not right now...

• Block
• Box
• Content
• Button

Checkout the storybook stories for examples.

Docusaurus documentation is forth coming. Our next steps will be generating markdown as part of the builds.

All of the components in this package use this helper useBulmaClasses.

To implement this it's pretty simple.

  const { bulmaHelperClasses rest } = useBulmaClasses({
    color: textColor // Map to has-text-{color}
    backgroundColor: bgColor // Map to has-background-{color}
    ...props // Spread remaining Bulma props
  });

<MyComponent m="2" color="primary" />

The available properties are:

• color
• backgroundColor
• colorShade
• m
• mt
• mr
• mb
• ml
• mx
• my
• p
• pt
• pr
• pb
• pl
• px
• py
• textSize
• textAlign
• textTransform
• textWeight
• fontFamily
• display
• visibility
• flexDirection
• flexWrap
• justifyContent
• alignContent
• alignItems
• alignSelf
• flexGrow
• flexShrink
• float
• overflow
• overlay
• interaction
• radius
• shadow
• responsive
• viewport

Turns out changeset/action@v1 recently added this feature. Signed commits. To enable it, we enabled an option:

commitMode: 'github-api'

In our github CI workflow, we changed the publish task to use the changeset action to automatically version and publish.

Also, we configured GPG signed commits for the github bot.

So far, it's super basic, but we plan on building on it. We're super excited!

The project is configured with the new changeset package.

Npm scripts have been added:

• npm run changeset
• npm run version
• npm run publish

Our current CI/CD logic hasn't changed, but it will in the near future. A build still occurs, and it still attempts to publish.

The key difference with changeset is: the publish command now checks to see if the version number is not already published, and it doesn't fail if the version number has already been published.

Our next steps are to integrate the changeset action into our CI/CD.

The next enhancements to publishing will involve changesets and pull requests.

npm run publish

We also added a perfom all kind of script to the parent package.

npm run all

This all command is an alias for all the CI/CD commands, all in one.

turbo run build typecheck test test:coverage bundle:stats lint format:check && turbo run build-storybook --filter=@allxsmith/bestax-bulma

We also added the building of the storybook to our CI/CD. The artifacts are saved each build.

To speed up builds, and help manage our mono repository, we're trying Turbo out.

I'm a longtime Babel/Webpack user, but this go around I'm using Rollup to bundle the new module.

We've tested a basic the build of a basic Button component and a corresponding unit test to make sure the library is building correctly.

Lastly, this project is going to use Typescript instead of plain'ole Javascript. This is not us choosing sides between Javascript and Typescript. We are doing this to be different from our past projects. The code will be new and fresh.

I can't promise we'll stick with this new configuration. We will be improving and enhancing it as we "get this show on the road"!

We have two github actions configured, a test-deploy and deploy.

• test-deploy: is run whenever a pull request is made on main. This action ensures the site can build successfully.

• deploy: is run whenever a pull request is merged into main, or when someone successfully pushes to main directly.

Yay CI/CD!

A little bit about myself...I've been a avid programmer for various corporations, and commercial organizations for most of my life.

Bestax is going to be a pure opensource project. Written in my favorite language "Javascript". With all original code.