bestax

TypeScript-first React component library for the Bulma v1 CSS framework — 80+ fully typed components — plus a project scaffolder and AI agent tooling.

📋 At a glance

Library	@allxsmith/bestax-bulma — npm install @allxsmith/bestax-bulma
Scaffolder	create-bestax — npm create bestax@latest my-app
Requires	React ^18 || ^19 (+ react-dom). Bulma v1 is the library's only runtime dependency — installed automatically
Styles	import '@allxsmith/bestax-bulma/bestax.css'; — Bulma v1 + the bestax extras (more flavors)
Icons (optional)	Font Awesome, Material Design Icons, Ionicons, Material Icons, Material Symbols — all optional peer dependencies
Docs	bestax.io · Storybook
LLM docs	llms.txt (curated index) · llms-full.txt (complete docs, one file)
Agent Skills	npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold (all four skills)
Community	Discord · Stack Overflow bestax · Issues

If you are an AI agent or LLM: fetch https://bestax.io/llms.txt for a curated index of the full documentation, or https://bestax.io/llms-full.txt for the complete docs in a single file, before answering questions about or writing code with this library. Every page on bestax.io is also available as raw markdown — see the LLMs guide.

Full documentation, guides, and API reference: 👉 https://bestax.io — the docs site is always the most complete and up-to-date resource.

---

🚀 Quick start

New project

Scaffold a Vite app with everything wired up (CSS flavor, icon library, optional AI skills + CLAUDE.md):

npm create bestax@latest my-app
# or: pnpm create bestax my-app

Useful flags: -t vite|vite-ts (template), -b complete|prefixed|no-helpers|no-helpers-prefixed|no-dark-mode (CSS flavor), -i fontawesome|mdi|ionicons|material-icons|material-symbols|none (icons), --skills (install the Agent Skills into .claude/skills), -y (accept defaults). See the create-bestax README.

Existing project

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

Import the bundled CSS once (Bulma v1 + the bestax extras), then use components:

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

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

Prefer stock Bulma? import 'bulma/css/bulma.min.css'; works too — you'll just miss the bestax-only components' styles (add @allxsmith/bestax-bulma/extras.css for those).

Theming, dark mode, and configuration are one wrapper away:

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

function Root() {
  return (
    <Theme isRoot colorMode="system">
      {/* colorMode: 'light' | 'dark' | 'system' */}
      <ConfigProvider iconLibrary="fa">
        <App />
      </ConfigProvider>
    </Theme>
  );
}

Installation guide · Configuration

---

📦 What's in this repo

Path	Package	What it is
bulma-ui/	@allxsmith/bestax-bulma	The component library
create-bestax/	create-bestax	Project scaffolder — npm create bestax@latest
docs/	—	Docusaurus source of bestax.io
skills/	—	Agent Skills for coding agents (also bundled into create-bestax)

The two packages are versioned and released independently.

---

🧩 Components

80+ components covering all of Bulma v1, plus bestax extras (Carousel, Dialog, Sidebar, Steps, date/time pickers, and more):

• Elements — Button, Table, Tag, Title, Icon, Image, Notification, Progress, Skeleton, Content, Delete, and typed HTML wrappers (Paragraph, Span, Figure, lists, …)
• Components — Navbar, Modal, Card, Dropdown, Menu, Message, Pagination, Panel, Tabs, Breadcrumb, Toast, Tooltip, Steps, Sidebar, Carousel, Collapse, Dialog, Loading
• Form — Field/Control, Input, Select, TextArea, Checkbox(es), Radio(s), Switch, Slider, Rate, File, Numberinput, Autocomplete, Taginput, and DateInput / TimeInput / DateTimeInput pickers
• Layout — Container, Section, Hero, Level, Media, Footer
• Columns & Grid — classic 12-column flexbox columns and the Bulma v1 CSS Grid
• Helpers — Theme, ConfigProvider, useBulmaClasses, classNames

Migrating from v2? Snackbar was merged into Toast in v3 — see the migration guides.

---

🎨 Styling and theming

Pick one CSS flavor (all shipped with the library — matching create-bestax -b):

Import	What you get
@allxsmith/bestax-bulma/bestax.css	Default. Bulma v1 + bestax extras
@allxsmith/bestax-bulma/versions/bestax-prefixed.css	All classes prefixed bestax- — pair with <ConfigProvider classPrefix="bestax-">
@allxsmith/bestax-bulma/versions/bestax-no-helpers.css	Without Bulma helper classes
@allxsmith/bestax-bulma/versions/bestax-no-helpers-prefixed.css	Prefixed, without helpers
@allxsmith/bestax-bulma/versions/bestax-no-dark-mode.css	Without dark-mode styles
@allxsmith/bestax-bulma/extras.css	bestax extras only — for use alongside stock bulma/css/bulma.min.css
@allxsmith/bestax-bulma/scss/*	Raw SCSS for full customization

• Dark mode: <Theme colorMode="dark"> (or "system" to follow the OS) — docs
• Brand colors, fonts, radius: the Theme component overrides Bulma's --bulma-* CSS variables (globally with isRoot, or scoped to a subtree). Default primary color is #1e6b99
• Class prefixing & icon defaults: ConfigProvider sets classPrefix and iconLibrary for a whole tree
• CSS variables reference: docs

---

🤖 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

• 🧩 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

  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).

---

⭐ Why bestax-bulma?

• Built for Bulma v1.x — most other React Bulma libraries are stuck on Bulma 0.9.4
• 100% TypeScript — every component and prop fully typed
• One runtime dependency: Bulma — it ships with the library; clean install, fewer security concerns
• Lightweight — see the live bundlephobia badge; tree-shakeable ESM + CJS
• 99% test coverage — enforced in CI by the jest config, not just claimed
• Active developer support — issues, questions, and PRs get fast responses

---

💬 Community

• Discord
• Stack Overflow — tag bestax
• GitHub issues

---

Contributing

Want to contribute or run the project locally? See CONTRIBUTING.md. In short:

corepack enable && pnpm install --frozen-lockfile
pnpm all   # build, typecheck, test + coverage, lint — the pre-PR gate

This is a pnpm + Turborepo monorepo; contributor-facing AI context lives in CLAUDE.md (mirrored for other tools in AGENTS.md).

---

🙏 Special Thanks

Bulma

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!

---

Attribution

• 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.

---

License

MIT © Alex Smith