https://github.com/balsigergil/bloum
A powerful library of modern web components for your design system.
https://github.com/balsigergil/bloum
a11y component-library components css css-framework dark-mode design-system html javascript typescript ui-components ui-framework ui-library vanilla-javascript wai-aria web-components
Last synced: about 1 month ago
JSON representation
A powerful library of modern web components for your design system.
- Host: GitHub
- URL: https://github.com/balsigergil/bloum
- Owner: balsigergil
- License: mit
- Created: 2023-07-27T13:31:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-17T15:43:36.000Z (about 2 months ago)
- Last Synced: 2026-01-17T23:56:10.401Z (about 2 months ago)
- Topics: a11y, component-library, components, css, css-framework, dark-mode, design-system, html, javascript, typescript, ui-components, ui-framework, ui-library, vanilla-javascript, wai-aria, web-components
- Language: TypeScript
- Homepage: https://www.bloum.dev
- Size: 6.35 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
A powerful library of modern web components
## Table of Contents
- 📖 [Introduction](#what-is-bloum)
- 🚀 [Features](#features)
- 📦 [Installation](#installation)
- 💻 [Usage](#usage)
- 📋 [Documentation](#documentation)
- ⚖️ [License](#license)
## What is Bloum?
Bloum is an open-source library of web components.
The goal of this library is to provide a set of CSS and 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 a project
using MPA (Multi-Page Application) like Laravel, Django or Rails.
It pairs well with server-side rendering and progressive enhancement tools
like [HTMX](https://htmx.org/) and [Alpine.js](https://alpinejs.dev/).
## 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](https://www.w3.org/WAI/ARIA/apg/) compliant.
- 🌓 **Dark mode:** Supports dark mode out of the box.
- 📱 **Responsive:** Works on all modern browsers and devices.
- 📦 **Single package:** Everything is bundled in a single package for an easy setup.
- 🎨 **Theming:** Easy to customize with CSS variables.
[//]: # "- 🧪 **Tested:** End-to-end tests with [Playwright](https://playwright.dev/) and unit tests with [Vitest](https://vitejs.dev/guide/features.html#testing)."
## Installation
### CDN
Use the following lines in your `head` tag
to load the latest version of Bloum from a CDN:
```html
```
### Package Manager
Install Bloum using your favorite package manager:
```bash
# 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 intialize it:
```js
import { init } from "bloum";
init();
```
This will register all the components globally.
After that, include the stylesheet in your JavaScript
if you're using a bundler like Vite or Webpack:
```js
import "bloum/dist/bloum.min.css";
```
Then, use the components in your HTML.
## Documentation
The documentation is available at [https://www.bloum.dev](https://www.bloum.dev)
for more information on how to use the components.
## License
Bloum is [MIT licensed](./LICENSE) © [Gil Balsiger](https://github.com/balsigergil)