Latest Bulma V1
Fully supports Bulma v1.x, unlike outdated alternatives stuck on older versions. Enjoy the newest features, improvements, and compatibility without compromises.
Lightweight and Efficient
Ultra-lightweight: Only 21KB gzipped. 3-20x smaller than most React UI libraries. Zero external dependencies: Clean installs, reduced bundle size, and fewer security concerns.
Developer-Friendly
100% TypeScript, 99% unit test coverage: Reliable, stable components you can trust. 100% Bulma implementation: Access every Bulma element, layout, and component as native React pieces.
New Features
These are brand new components found in the latest Bulma v1, and now available in Bestax-Bulma!
Skeleton
The Skeleton component is a Bulma-styled skeleton loader for React, designed to visually indicate that content is loading. It provides block and multi-line placeholder variants, and can be used as a direct component or applied to compatible components using the skeleton prop or useBulmaClasses. Skeletons help improve perceived performance by showing a loading state before real content appears.
Grid & Cell
The Grid component brings Bulma&s advanced CSS Grid layout to React, supporting both responsive and fixed grid modes, gap and column controls, and multiple breakpoints. Use Cell inside a Grid to place individual items, control their span, and manage layout at a granular level. These components allow for complex, modern layouts with full Bulma utility support, including color, background, and spacing helpers.
Bulma Supported Components
Elements
Basic Bulma elements made available as React components for fast, consistent UIs.
- Block – Container with margin bottom. Great for consistent spacing.
- Box – Container with optional color/shadow.
- Button – The most awesome button in existence.
- Buttons – A container for grouping buttons.
- Content – Container for html content, great for content from services and editors.
- Delete – Signify delete or close. Useful in tons of situations.
- Icon – Standardized icon wrapper for Bulma/Font Awesome.
- Image – Container for images, fixed and responsive.
- Notification – A colored block to notify.
- Progress – A decent looking progress bar.
- Skeleton – Bulma-styled skeleton loader for indicating loading state.
- Table – Thead, Tbody, Tfoot, Td, Th, Tr for styled tables.
- Tag – Labels with colors and sizes.
- Tags – Group tags together.
- Title – A styled title.
- SubTitle – A styled SubTitle, goes well under a Title.
Components
Reusable UI widgets and navigation components for building interactive applications.
- Breadcrumb – A breadcrumb to help users navigate.
- Card – Content card with header, image, content, and footer.
- Dropdown – A dropdown menu, kinda like select, but not a select.
- Menu – Vertical navigation menu with nested items.
- Message – Colored message blocks, great for emphasis.
- Modal – A Modal or dialog box.
- Navbar – Responsive top navigation bar and items.
- Pagination – A pagination bar for navigating multiple pages of results.
- Panel – Sidebar menu/panel with subcomponents (tabs, blocks, icons).
- Tabs/Tab – Tab navigation with tab list and tab item.
Form
Accessible, fully styled form controls and layout, supporting all Bulma modifiers.
- Field – Form field wrapper with label and layout.
- Control – Form control container (handles icons, loading, etc).
- Input – Styled input field.
- Select – Styled select dropdown.
- File – File input.
- Radio & Radios – Radio button and grouped radios.
- Checkbox & Checkboxes – Checkbox and grouped checkboxes.
- TextArea – Styled textarea field.
Layout
High-level layout primitives for structuring your app and pages.
Columns
Responsive and flexible row-column layouts using Bulma’s columns system.
Grid
CSS Grid support, using Bulma’s new grid utilities for advanced layouts.
Helpers
Little helpers for translating properties to Bulma classes, recommended for custom Bulma-powered components.
- classNames – Our internal class name generator.
- useBulmaClasses – Handles the translation from property to bulma classes.
How to Pronounce Bestax
The name combines “B” (for Bulma) + “stacks” (component stacks), creating a memorable name that reflects building UIs with stacked Bulma components.