Components
A showcase of all Bloum components. Each component is fully interactive.
Elements
Button
Badge
Tag
Primary
Success
Danger
Warning
Info
Solid
Rounded
Small
Large
Removable
Avatar
Alert
Neutral alert
This is a general message.
Information
This is an informational alert message.
Success
Operation completed successfully.
Warning
Please review before proceeding.
Error
Something went wrong.
Card
List of users
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi asperiores assumenda at corporis debitis dolore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis
culpa cumque ea exercitationem neque nulla.
Simple card
A card with only a body section. Useful for simple content blocks.
Spinner
Skeleton
Progress
Steps
Timeline
Application Submitted
15th March 2024
Your job application has been successfully submitted.
Application Reviewed
18th March 2024
Your application has been reviewed by the hiring team.
Interview Scheduled
22nd March 2024
Your interview has been scheduled.
Decision
Pending
Application Submitted
• 15th March 2024
Your job application has been successfully submitted.
Application Reviewed
• 18th March 2024
Your application has been reviewed by the hiring team.
Interview Scheduled
• 22nd March 2024
Your interview has been scheduled.
Decision
Pending
Breadcrumb
Pagination
Tooltip
Hover this text
Copy Button
npm install bloum
Inputs
Form Field
Looks good!
Please enter a valid URL.
Input with Icon
Password Input
Checkbox
Radio
Switch
Textarea
Combobox
Pin Input
Checkbox Card
Data Display
Table
| Name | Role | Actions | ||
|---|---|---|---|---|
| Alice Johnson | alice@example.com | Admin | ||
| Bob Smith | bob@example.com | Editor | ||
| Clara Davis | clara@example.com | Viewer |
Overlays
Modal
Drawer
Popover
Set the dimensions for the layer.
Width
Height
Menu
Toast
Layout
Tabs
Manage your users here. Add, edit, or remove users from your organization.
Organize users into groups for easier permission management.
Configure notification preferences and channels.
General settings for your account and organization.
Accordion
Bloum is a modern UI component library built with vanilla
JavaScript and CSS. It provides a comprehensive set of
accessible, customizable components for building web
applications.
Install via npm with
npm install bloum, then
import the CSS and call init() to initialize all
components automatically.
Yes! Bloum has native support for HTMX. Components are
automatically initialized when new content is loaded via
HTMX requests.
Collapse
This content is collapsible. Click the button above to toggle its visibility with a smooth animation.