Bloum

A lightweight yet powerful library of web components

Table of Contents

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

What is Bloum?

Bloum is an open-source library of web components. The goal of this library is to provide a set of JavaScript components that can be used in any web project, regardless of the framework or library used. The main use-case for Bloum is to provide easy-to-use components for project using MPA (Multi-Page Application) like Laravel, Django or Rails. It pairs well with server-side rendering and progressive enhancement tools like HTMX and Alpine.js.

It uses Lit under the hood to provide a modern and efficient way to create web components but doesn't require any dependencies.

Features

• 🚀 Easy to use: Bloum is designed to be easy to use and integrate in any project.
• 🔍 Accessible: Built with accessibility in mind. It's fully keyboard navigable and ARIA compliant.
• 🌓 Dark mode: Supports dark mode out of the box.
• 📱 Responsive: Works on all modern browsers and devices.
• 📦 No dependencies: Does not depend on any other library or framework.
• 🧪 Tested: End-to-end tests with Playwright and unit tests with Vitest.
• 🎨 Theming: Easy to customize with CSS variables.
• 🌈 Modern: Built with the Web Components API using Lit.

Components

Web components

• Modal
• Alert dialog
• Tabs
• Toast
• Accordion / Collapse
• Alert
• Data table
• Sidebar
• Dropdown menu
• Phone input
• Pin input
• DatePicker / TimePicker / Calendar

JavaScript components

• Popover
• Tooltip
• Select

CSS only components

• Button
• Badge / Tag / Chip / Pill
• Card
• Form elements
• Command menu
• Progress bar
• Spinner
• Switch
• Radio / Checkbox group
• Pagination
• Breadcrumb
• Table

Installation

CDN

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

<script src="https://unpkg.com/bloum" defer></script>

<!-- include the default unstyled stylesheet -->
<link href="https://unpkg.com/bloum/dist/style.min.css" rel="stylesheet">
<!-- include the modern theme -->
<link href="https://unpkg.com/bloum/dist/modern.min.css" rel="stylesheet">

Package manager

You can 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, you can import the library in your JavaScript project:

import "bloum"

This will register all the components globally.

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

import "bloum/dist/style.min.css"

If you want to use an already styled theme, you can include it too:

import "bloum/dist/modern.min.css"

Then, you can use the components in your HTML:

<bl-select name="my-select">
  <div data-value="1">Option 1</div>
  <div data-value="2">Option 2</div>
  <div data-value="3">Option 3</div>
</bl-select>

Documentation

The documentation is available at https://www.bloum.dev.

License

Bloum is MIT licensed © Gil Balsiger