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.

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.

• Container – Responsive maximum width container.
• Section – Page section wrapper.
• Hero – Prominent hero banner (with Hero.Head, Hero.Body, Hero.Foot).
• Level – Horizontal alignment container and items.
• Media – Flexible media object for avatars/media + content.
• Footer – Page footer.

Columns

Responsive and flexible row-column layouts using Bulma’s columns system.

• Columns – Row container for columns.
• Column – Individual grid column.

Grid

CSS Grid support, using Bulma’s new grid utilities for advanced layouts.

• Grid – CSS grid container.
• Cell – CSS grid cell.

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.