Bloum

A powerful library of modern 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.

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.
• 🎨 Theming: Easy to customize with CSS variables.

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>
<link href="https://unpkg.com/bloum/dist/style.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 stylesheet in your JavaScript if you're using a bundler like Vite or Webpack:

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

Then, you can 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