@allxsmith/bestax-bulma

@allxsmith/bestax-bulma

TypeScript-first React component library for the Bulma v1 CSS framework — 80+ fully typed, tree-shakeable components, including extras like Carousel, Dialog, Sidebar, Steps, and date/time pickers.

Requires React ^18 || ^19. Bulma v1 is the only runtime dependency and installs automatically.

Part of the bestax monorepo — see also create-bestax for scaffolding new projects.

📚 Comprehensive Documentation

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!

🚀 Getting Started

Starting fresh? Scaffold a ready-to-go app instead: npm create bestax@latest my-app.

1. Install the package

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

2. Import the CSS

The library bundles its own CSS (Bulma v1 + the bestax extras). Import it once in your main JS/TS file:

import '@allxsmith/bestax-bulma/bestax.css';

Prefer stock Bulma? That works too — add extras.css for the bestax-only components' styles:

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

More flavors are shipped as subpath exports — prefixed classes (versions/bestax-prefixed.css + <ConfigProvider classPrefix="bestax-">), no-helpers, no-dark-mode, and raw SCSS at @allxsmith/bestax-bulma/scss/*. See the installation guide.

3. (Optional) Add an Icon Library

Five icon libraries are supported as optional peer dependencies: Font Awesome (@fortawesome/fontawesome-free), Material Design Icons (@mdi/font), ionicons, material-icons, and material-symbols.

npm install @fortawesome/fontawesome-free

Set the default for your whole app with ConfigProvider, e.g. <ConfigProvider iconLibrary="fa">.

4. Quick Example

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

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

export default App;

5. Theming and Dark Mode

Wrap your app in Theme to override Bulma's --bulma-* CSS variables and control the color scheme:

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

<Theme isRoot colorMode="system">
  {/* colorMode: 'light' | 'dark' | 'system' */}
  <App />
</Theme>;

⭐ Why Choose bestax-bulma?

• Supports the latest Bulma v1.x Other React Bulma libraries are stuck on Bulma 0.9.4 — bestax-bulma is built for the future.
• 80+ components All of Bulma v1, plus extras: Carousel, Dialog, Sidebar, Steps, Autocomplete, Taginput, DateInput/TimeInput/DateTimeInput pickers, and more. (Migrating from v2? Snackbar merged into Toast.)
• Dark mode & theming built in Theme colorMode, --bulma-* variable overrides, and prefixed-class builds via ConfigProvider.
• Just one dependency: Bulma Every Bulma library depends on it — we ship it automatically. Clean install, fewer security concerns.
• Tree-shakeable ESM + CJS Import only what you use — see the live bundle size.
• 99% unit test coverage Enforced in CI by the jest config — not just claimed.
• 100% TypeScript Full type safety for you and your team.
• Active developer support Issues? Questions? PRs? Get fast responses and real improvements.

📦 NPM Package

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

📚 Documentation

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!

📖 Storybook

Explore live, interactive component examples in our Storybook:

👉 https://bestax.io/storybook

🤖 For AI Tools

Building with an AI agent (Claude Code, Cursor, Copilot)? bestax-bulma ships LLM-optimized docs:

• 📘 LLMs guide — how to use the library with AI tools

• 📄 llms.txt — curated index · llms-full.txt — the full docs in one file · every docs page is also served as raw markdown

• 📦 In the npm package — the tarball ships llms.txt, AGENTS.md, and CLAUDE.md pointer files, so agents exploring node_modules land on these resources by filename

• 🧩 Agent Skills — teach your agent the bestax way:

  Skill	Use it when…
  bestax-layout-scaffold	Turning a high-level request (dashboard, landing page, …) into a responsive page
  bestax-form	Building forms — Field/Control composition and the full input inventory
  bestax-theming	Customizing colors, fonts, dark mode via Theme and --bulma-* variables
  bestax-custom-component	Building a new custom component beyond stock Bulma, the bestax way
  bestax-icons	Adding icons — Icon/IconText and the five supported icon libraries
  bestax-optimize	Shrinking the built CSS — flavor builds, modular Sass, import hygiene
  bestax-migrate	Moving an app off react-bulma-components (v4) onto bestax-bulma

  npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold
  

  New projects get the skills automatically with npm create bestax@latest my-app --skills (plus a generated CLAUDE.md).

🙏 Attribution

bestax-bulma is built on top of the incredible Bulma CSS framework, © Jeremy Thomas and licensed under the MIT License. Some example content and documentation is adapted from the Bulma website (CC BY-NC-SA 4.0), © Jeremy Thomas.

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

We are not affiliated with Bulma or Jeremy Thomas in any way — we're just big fans of the Bulma framework!

License

Source code licensed MIT