Table of Contents
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.
For AI assistants, the documentation is also available in the
llms.txt format: llms.txt
(index) and llms-full.txt (everything in
one file). Both also ship in the npm package under dist/.
License
Bloum is MIT licensed © Gil Balsiger
