Preact components for the Bulma CSS project.
MIT License
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.
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.
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.
// Import Bulma CSS
import "bulma/css/bulma.min.css";
// 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";
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>;
}