Skip to main content

Quick Start

Get bestax-bulma running in under 2 minutes with this quick start guide.

tip

For detailed installation options, framework-specific guides, or troubleshooting, check out our comprehensive guides.

1. Run the Installer​

npm create bestax@latest my-bestax-app
cd my-bestax-app

The installer walks you through a few prompts and sets up everything for you:

  • Framework — Vite (JavaScript) or Vite + TypeScript
  • Bulma flavor — Complete, Prefixed, No Helpers, No Helpers + Prefixed, or No Dark Mode
  • Icon library — Font Awesome, Material Design Icons, Material Icons, Material Symbols, Ionicons, or none

It installs @allxsmith/bestax-bulma, the icon font package you pick, adds the CSS imports to src/main.{jsx,tsx}, and scaffolds a working app. No manual npm install or CSS import step needed.

2. Edit Your First Component​

Open src/App.jsx (or App.tsx) and replace it with:

import { Button, Box, Title, Notification } from '@allxsmith/bestax-bulma';
import { useState } from 'react';

function App() {
  const [showAlert, setShowAlert] = useState(false);

  return (
    <Box>
      <Title>Welcome to bestax-bulma! 🎉</Title>

      <Button color="primary" onClick={() => setShowAlert(!showAlert)}>
        Click me!
      </Button>

      {showAlert && (
        <Notification color="success" mt="4">
          Great! You're ready to build with bestax-bulma.
        </Notification>
      )}
    </Box>
  );
}

export default App;

3. Run Your App​

npm run dev

That's it! Visit http://localhost:5173 to see your app running.

What's Next?​

Now that you have bestax-bulma running:

📦 Installation Options​

→ Installation Guide

  • Different ways to include Bulma CSS
  • Adding icon libraries (Font Awesome, Material Icons)
  • Prerequisites and browser support

🛠️ Toolchain Setup​

→ Toolchains

  • Next.js setup (with SSR)
  • TypeScript configuration
  • Create React App setup
  • Vite advanced configuration

🎨 Explore Components​

→ Browse all components

  • 80+ React components
  • Full Bulma v1 support
  • Live examples and API docs

Component Categories​

bestax-bulma provides a complete set of Bulma components organized into logical groups:

🟢 Elements​

Basic building blocks like Button, Box, Title, and Tag.

🟦 Layout​

Structure your app with Container, Section, Hero, and Level.

🟧 Components​

Advanced UI components like Modal, Navbar, Carousel, and Dialog.

🟪 Form​

Complete form controls including Input, Select, Autocomplete, and DateInput.

🟩 Grid & Columns​

Responsive layouts with Grid, Columns, and Cell.

Live Playground​

Want to experiment? Try our live examples:

// Try editing this code!
function Demo() {
  const [count, setCount] = useState(0);

  return (
    <Box>
      <Title size="4">Interactive Demo</Title>
      <Buttons>
        <Button color="primary" onClick={() => setCount(count + 1)}>
          Clicked {count} times
        </Button>
        <Button color="danger" isOutlined onClick={() => setCount(0)}>
          Reset
        </Button>
      </Buttons>
    </Box>
  );
}

Need Help?​

Why bestax-bulma?​

  • ✅ Latest Bulma v1 - Full support for the newest Bulma features
  • ✅ TypeScript Ready - Complete type definitions included
  • ✅ Tree Shakeable - Only import what you need
  • ✅ 99% Test Coverage - Reliable and stable
  • ✅ Just One Dependency - Bulma. Every Bulma library depends on it — we bundle it for you