astro-bulma

Typed, zero-client-JS Astro components wrapping Bulma CSS.

Get started

View on GitHub

What’s included

7 Elements

Box, Button, Icon, Image, Notification, Table, Tag

4 Form components

TextInput, Select, Checkbox, FileInput

5 Components

Breadcrumb, Card, Message, Modal, Tabs

Zero JS frameworks

Pure Astro components. Interactive pieces use vanilla JS scoped inside astro:page-load.

Installation

pnpm add astro-bulma bulma

Then import Bulma’s CSS in your layout:

<html>
  <head>
    <link rel="stylesheet" href="/node_modules/bulma/css/bulma.min.css" />
  </head>
  <body><slot /></body>
</html>

Or import it in a global CSS file:

@import "bulma/css/bulma.min.css";

Usage

---
import { Button, Box, Notification } from "astro-bulma";
---

<Box>
  <Notification color="success" dismissible>
    Everything is working!
  </Notification>
  <Button color="primary" type="submit">Save</Button>
</Box>

Individual imports

You can also import components directly from their path:

import Box from "astro-bulma/elements/Box.astro";
import TextInput from "astro-bulma/forms/TextInput.astro";
import Modal from "astro-bulma/components/Modal.astro";