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. Create a React App​

Using Vite (recommended for quick setup):

npm create vite@latest my-bestax-app -- --template react
cd my-bestax-app

2. Install Dependencies​

npm install @allxsmith/bestax-bulma bulma

3. Add Bulma CSS​

In your src/main.jsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'bulma/css/bulma.min.css'; // Add this line
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

4. Use Your First Component​

Replace src/App.jsx:

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;

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

  • 60+ 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, Card, and Dropdown.

🟪 Form​

Complete form controls including Input, Select, Checkbox, and Field.

🟩 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
  • ✅ Zero Dependencies - Just React and Bulma CSS
Bulma CSS Required

Remember that bestax-bulma components require Bulma CSS to be loaded. The components provide the React integration, while Bulma CSS provides the styling.