# Bloum

> A powerful library of modern web components for your design system. Bloum is a CSS-first UI component library for server-rendered multipage apps (Laravel, Django, Rails…), styled with plain CSS classes and enhanced with a small amount of vanilla JavaScript. It works well with htmx and Alpine.js and is not meant for React or Vue.

Key facts:

- Install with `npm install bloum` or from a CDN (`https://unpkg.com/bloum/dist/...`). Call `init()` (or `Bloum.init()` with the browser bundle) once the DOM is ready; it also re-initializes components on `htmx:load`.
- Components are plain HTML with Bloum classes (`.btn`, `.modal`, `.input`…) or light-DOM custom elements (`<bl-tabs>`, `<bl-copy-button>`, `<bl-calendar>`). There is no shadow DOM.
- `bloum.min.css` holds the tokens and component styles. `reset.min.css` and `utilities.min.css` are opt-in; with Tailwind CSS, load only `bloum.min.css`.
- Theme by overriding the semantic `--bl-*` CSS variables (see Design tokens). Dark mode is enabled with the `.dark` class or `data-theme="dark"`.
- Current version: 0.22.0. The complete documentation in one file is at https://www.bloum.dev/llms-full.txt.

## Docs

- [Introduction to Bloum](https://www.bloum.dev/llms/docs/introduction.md)
- [Getting Started](https://www.bloum.dev/llms/docs/getting-started.md)
- [Components Overview](https://www.bloum.dev/llms/docs/components.md)
- [Design Tokens](https://www.bloum.dev/llms/docs/design-tokens.md)
- [Tailwind CSS Integration](https://www.bloum.dev/llms/docs/tailwindcss.md)
- [Utilities](https://www.bloum.dev/llms/docs/utilities.md)

## Components

- [Accordion](https://www.bloum.dev/llms/components/accordion.md): Collapsible sections that expand and collapse to show/hide content panels
- [Alert](https://www.bloum.dev/llms/components/alert.md): Notification component that displays important messages with different severity levels
- [Avatar](https://www.bloum.dev/llms/components/avatar.md): Circular or rounded display for user profile pictures or initials
- [Badge](https://www.bloum.dev/llms/components/badge.md): Small status indicator or label that appears near other UI elements
- [Breadcrumb](https://www.bloum.dev/llms/components/breadcrumb.md): Navigation aid showing the user's current location within a hierarchical structure
- [Button](https://www.bloum.dev/llms/components/button.md): Interactive element that triggers actions when clicked or pressed
- [Icon Button](https://www.bloum.dev/llms/components/icon-button.md)
- [Calendar](https://www.bloum.dev/llms/components/calendar.md): Month view calendar that displays events, with localized navigation
- [Card](https://www.bloum.dev/llms/components/card.md): Container component that groups related content with consistent styling
- [Checkbox Card](https://www.bloum.dev/llms/components/checkbox-card.md): Card-style checkbox component for selection with enhanced visual presentation
- [Checkbox](https://www.bloum.dev/llms/components/checkbox.md): Input components for single and multiple selection with customizable styling and states
- [Collapse](https://www.bloum.dev/llms/components/collapse.md): Collapsible content component that can be expanded and collapsed
- [Combobox](https://www.bloum.dev/llms/components/combobox.md): Input field that suggests and completes text as the user types
- [Context Menu](https://www.bloum.dev/llms/components/context-menu.md): Right-click menu that provides contextual actions for specific elements
- [Copy Button](https://www.bloum.dev/llms/components/copy-button.md): Button that copies text to the clipboard
- [Drawer](https://www.bloum.dev/llms/components/drawer.md): Panel that slides in from the side of the screen over existing content
- [Form Field](https://www.bloum.dev/llms/components/form-field.md): Wrapper component that provides consistent styling and layout for form inputs with labels and help text
- [Input](https://www.bloum.dev/llms/components/input.md): Basic text input field for collecting user data
- [Menu](https://www.bloum.dev/llms/components/menu.md): Menu that appears when triggered, showing a list of selectable options
- [Modal](https://www.bloum.dev/llms/components/modal.md): Popup dialog that overlays the main content and requires user interaction
- [Navbar](https://www.bloum.dev/llms/components/navbar.md): Top-mounted navigation menu with primary actions and links
- [Pagination](https://www.bloum.dev/llms/components/pagination.md): Navigation controls for splitting large datasets across multiple pages
- [Phone Input](https://www.bloum.dev/llms/components/phone-input.md): Phone number field with a country selector, formatted as the user types
- [Pin Input](https://www.bloum.dev/llms/components/pin-input.md): Specialized input for one-time passwords with separate fields for each digit
- [Popover](https://www.bloum.dev/llms/components/popover.md): Small overlay that appears near a trigger element with contextual content
- [Progress](https://www.bloum.dev/llms/components/progress.md): Visual indicator showing completion status of tasks or processes
- [Segmented Control](https://www.bloum.dev/llms/components/segmented-control.md): Group of buttons that represent different states or values
- [Sidebar](https://www.bloum.dev/llms/components/sidebar.md): Side-mounted navigation menu with hierarchical structure
- [Skeleton](https://www.bloum.dev/llms/components/skeleton.md): Loading placeholder that mimics the structure of content being loaded
- [Spinner](https://www.bloum.dev/llms/components/spinner.md): Visual marker that shows status, progress, or active states
- [Steps](https://www.bloum.dev/llms/components/steps.md): Progress indicator showing the current step in a multi-step process
- [Switch](https://www.bloum.dev/llms/components/switch.md): Switch-style input for binary on/off states
- [Table](https://www.bloum.dev/llms/components/table.md): Structured data display with rows, columns, sorting, and filtering capabilities
- [Tabs](https://www.bloum.dev/llms/components/tabs.md): Horizontal navigation that switches between different content panels
- [Tag](https://www.bloum.dev/llms/components/tag.md): Label for categorizing and organizing content
- [Textarea](https://www.bloum.dev/llms/components/textarea.md): Multi-line text input field for longer content entry
- [Timeline](https://www.bloum.dev/llms/components/timeline.md): Component that displays events or milestones in chronological order
- [Toast](https://www.bloum.dev/llms/components/toast.md): Temporary notification that appears briefly to provide feedback
- [Tooltip](https://www.bloum.dev/llms/components/tooltip.md): Brief informational popup that appears on hover after a short delay

## Optional

- [Color Scheme Switcher (experimental)](https://www.bloum.dev/llms/components/color-scheme-switcher.md): Button that opens a dropdown menu with selectable color schemes
- [Command Menu (experimental)](https://www.bloum.dev/llms/components/command-menu.md): Searchable command interface activated by keyboard shortcuts
- [Data Table (experimental)](https://www.bloum.dev/llms/components/data-table.md): Advanced data table component with enhanced functionality for large datasets
- [Storybook](https://docs.bloum.dev): Interactive demos of every component
- [Source code](https://github.com/balsigergil/bloum): GitHub repository