Table of Contents

• 📖 Introduction
• 🚀 Features
• 📦 Installation
• 💻 Usage
• 📋 Documentation
• ⚖️ License

What is Bloum?

Bloum is an open-source library of UI web components intended to provide a complete set of CSS and JS components to compose your design system. The goal for Bloum is to be a modern alternative to Bootstrap and easy to use for non-frontend developers.

The main use-case for Bloum is to provide components for a multipage application (MPA) project like Laravel, Django or Rails. It is not (and won't be) intended to be used with frontend frameworks like React or Vue. It pairs well with server-side rendering and progressive enhancement tools like HTMX and Alpine.js.

Features

• 🚀 Feature-rich: Bloum provides a wide range of components to build modern web apps or design systems.
• 🪶 Lightweight: Bloum is light. It's less than 30KB minified and gzipped.
• 🔍 Accessible: Built with accessibility in mind. It's fully keyboard-navigable and WAI-ARIA compliant.
• 🌓 Dark mode: Supports dark mode out of the box.
• 📱 Responsive: Works on all modern browsers and devices.
• 📦 No dependencies: Works standalone, with no CSS framework required, easy Tainwind integration.
• 🎨 Theming: Easy to customize with CSS variables.

Installation

Bloum ships its CSS as three separate stylesheets. Which ones you load depends on whether your project already uses Tailwind CSS:

| Stylesheet | Standalone | With Tailwind | Contains | | :------------------ | :--------- | :------------ | :------------------------------------- | | reset.min.css | ✅ Yes | ❌ No | Cross-browser normalization | | bloum.min.css | ✅ Yes | ✅ Yes | Design tokens and all component styles | | utilities.min.css | ✅ Yes | ❌ No | Basic utilities (flex, grid, spacing) |

With Tailwind, load only bloum.min.css — Tailwind's preflight and utilities already cover the other two.

CDN

Use the following lines in your head tag to load the latest version of Bloum from a CDN:

<!-- Standalone (no Tailwind) -->
<link href="https://unpkg.com/bloum/dist/reset.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bloum/dist/bloum.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bloum/dist/utilities.min.css" rel="stylesheet" />

<script src="https://unpkg.com/bloum/dist/bloum.bundle.min.js" defer></script>

The bundle exposes a global Bloum object. Call init() on it once the DOM is ready:

<script>
  document.addEventListener("DOMContentLoaded", () => Bloum.init());
</script>

Package Manager

Install Bloum using your favorite package manager:

# NPM
npm install bloum

# Yarn
yarn add bloum

# Pnpm
pnpm add bloum

# Bun
bun add bloum

Usage

Once installed, import the library in your project and initialize it:

import { init } from "bloum";
init();

This will register all the components globally.

After that, include the stylesheets in your JavaScript if you're using a bundler like Vite or Webpack:

// Standalone (no Tailwind)
import "bloum/dist/reset.min.css";
import "bloum/dist/bloum.min.css";
import "bloum/dist/utilities.min.css";

// With Tailwind — the reset and utilities are not needed
import "tailwindcss";
import "bloum/dist/bloum.min.css";

Then, use the components in your HTML.

Documentation

The documentation is available at https://www.bloum.dev for more information on how to use the components.

License

Bloum is MIT licensed © Gil Balsiger