preact-bulma

Preact components for the Bulma framework

Usage no npm install needed!

<script type="module">
  import preactBulma from 'https://cdn.skypack.dev/preact-bulma';
</script>

README

Preact Bulma ⚛️

A collection of components to build interfaces with Bulma.

npm install preact-bulma

For the version targeting Preact X, use

npm install preact-bulma@next

v1 but still in alpha! Here's why.

Getting started

1. Install

preact-bulma has a peer dependency on Preact, which means you need to install it separately, but allows you to choose the version. The project supports 8.2.x and up.

2. Add styling

The project doesn't import any styling by default - this is to let you have full control over the style. You can import the full Bulma framework, or, using SASS/SCSS, only pull the parts that you want.

Full Bulma bundle (default theme, no customization, easiest)

// Import Bulma CSS
import "bulma/css/bulma.min.css";

Custom styling (allows customization, recommended)

// Import SCSS file
import "styles/app.scss";

@charset "utf-8";
// Import *all* of Bulma - refer to the customization guide for more info on customizing Bulma:
// https://bulma.io/documentation/customize/
@import "~bulma/bulma";

3. Use preact-bulma

You can now use the provided components into your project as you would with any component.

import { Card } from "preact-bulma";
function MyCard() {
  <Card.Card>
    <Card.Header
      title="Physics breakthrough"
      icon="fas fa-exclamation-circle"
    />
    <Card.Content>
      No, really, literally. Black holes have been proven to break through
      spacetime. (get it?)
    </Card.Content>
    <Card.Footer>
      <Card.FooterItem>Share</Card.FooterItem>
    </Card.Footer>
  </Card.Card>;
}

Links