Skip to main content

Getting Started

Welcome to bestax-bulma – a modern, flexible React component library powered by the latest Bulma v1 and TypeScript.

info

The latest Bulma V1 is supported by bestax-bulma.

Installation​

  1. Install the package:

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

  2. Include Bulma CSS in your project:

    • In your main JS/TS file: 
      import 'bulma/css/bulma.min.css';
    • Or via CDN in your HTML: 
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"
      />

  3. (Optional) Add an icon library:

    Many components support icons. We recommend:

    npm install @fortawesome/fontawesome-free

Component Overview​

bestax-bulma is organized into several major directories. Here’s a high-level overview with links to API docs for each section:

🟢 Elements​

info

See the Elements summary for a quick overview, or browse all Elements in the API docs.

Basic Bulma elements made available as React components.

  • 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 – A container for html content, great for content from services and WYSIWYG editors.
  • Delete – An element to signify delete or close. Useful in tons of situations.
  • Icon – Standardized icon wrapper for Bulma/Font Awesome.
  • Image – A container for images, fixed and responsive.
  • Notification – A colored block to notify.
  • Progress – A decent looking progress bar.
  • 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.

🟦 Columns​

info

See the Columns summary for a quick overview, or browse all Columns in the API docs.

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

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

🟩 Grid​

info

See the Grid summary for a quick overview, or browse all Grid in the API docs.

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

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

🟨 Layout​

info

See the Layout summary for a quick overview, or browse all Layout in the API docs.

High-level layout primitives for structuring your app.

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

🟧 Components​

info

See the Components summary for a quick overview, or browse all Components in the API docs.

Reusable UI widgets and navigation components.

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

info

See the Form summary for a quick overview, or browse all Form in the API docs.

Accessible, fully styled form controls 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.

🟦 Helpers​

info

See the Helpers summary for a quick overview, or browse all Helpers in the API docs.

Little helpers used throughout this package to aid with translating properties to bulma classes. Recommended to use if you want to create your own components that are bulma powered.

  • classNames – Our internal class name generator.
  • useBulmaClasses – Handles the translation from property to bulma classes.

Example Usage​

Live Editor
import React from 'react';
// import {
//   Box,
//   Button,
//   Columns,
//   Column,
//   Field,
//   Input,
// } from '@allxsmith/bestax-bulma';
// Line above commented out for live example
import 'bulma/css/bulma.min.css';

function Demo() {
  return (
    <Box>
      <Columns>
        <Column>
          <Field label="Username">
            <Input placeholder="Enter your username" />
          </Field>
          <Button color="primary">Submit</Button>
        </Column>
      </Columns>
    </Box>
  );
}

Next Steps​

  • Keep exploring right here in the documentation site!
  • Get started with the API component docs for detailed usage, props, and examples for every component.
    • For example, check out Button or browse other components in the sidebar.
  • Try out code samples and experiment as you go.

Storybook​

We also provide a Storybook site that we use for UI development and visual testing of all components.
If you prefer the Storybook format, feel free to explore it for live demos and interaction.
However, this documentation site is the primary and most complete resource for usage guides and real-world examples.

🙏 Special Thanks​

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​

See Bulma’s license page for more details.