Bloom UI components examples

Bloom

A modal dialog for confirming the deletion of an organization, requiring the user to type the organization's name to proceed.

• Modal

Bloom

A dropdown menu displaying user account information, project navigation, monthly credit usage, and various settings and help options.

• Dropdown menu

Bloom

A segmented control with two options, 'Production' and 'Development', where 'Production' is selected.

• Segmented control

Bloom

A sidebar navigation menu displaying project settings options with a selected item.

• Vertical navigation

Bloom

A progress display for project deployment showing completed, in-progress, and pending steps.

• Stepper

Bloom

A header bar displaying organization name, development status, credit balance, upgrade option, and user avatar.

• Horizontal navigation

Bloom

A user profile dropdown menu with options for settings, documentation, changelog, shortcuts, theme selection, and log out, showing a nested popover for theme options.

• Dropdown menu

Bloom

A modal window prompting a user to upgrade their plan to unlock a specific feature, detailing the benefits of the 'Hobby' plan.

• Modal

Bloom

• Tabs

Bloom

An input field for variations with existing tags

• Input tag

Bloom

A dropdown menu displaying status options with "Published" currently selected and checked.

• Input select

Bloom

A product listing page displaying a table of products with search, filter, and pagination controls, along with actions like export, import, and create.

• Table