---
title: "Bloom UI Primitives Catalog (60+ Flutter Components)"
description: "Comprehensive catalog of unstyled, accessible, copy-paste Flutter primitives inspired by shadcn/ui."
category: "Bloom UI"
url: "https://bloom-platform-ten.vercel.app/ui"
last_updated: "2026-08-15"
---

# Bloom UI Primitives Catalog

> Over 60 production-grade, accessible, customizable Flutter components and charts built on pure Dart with zero external runtime dependencies.

Inspired by the philosophy of **shadcn/ui**, Bloom UI allows you to own your code. You can install components directly into your codebase using `bloom ui add <component>` or consume them via the published `bloom_ui` package on Pub.dev.

---

## 🚀 Quick Installation

```bash
# Initialize Bloom UI in your Flutter project
bloom ui init

# Add individual primitives
bloom ui add button card dialog tabs sheet
```

---

## 📂 Components by Category

### Form Controls (14 components)

| Component | Dart Class | Description | CLI Command |
| :--- | :--- | :--- | :--- |
| [Button](https://bloom-platform-ten.vercel.app/ui/button.md) | `BloomButton` | Displays a button or a component that looks like a button with 8 sizing steps, soft destructive tint, and loading state indicators. | `bloom ui add button` |
| [Button Group](https://bloom-platform-ten.vercel.app/ui/button-group.md) | `BloomButtonGroup` | A connected row of action buttons or toggle selectors with continuous border grouping. | `bloom ui add button_group` |
| [Input](https://bloom-platform-ten.vercel.app/ui/input.md) | `BloomInput` | Displays a 32px height calibrated form input field or a component that looks like an input field. | `bloom ui add input` |
| [Input Group](https://bloom-platform-ten.vercel.app/ui/input-group.md) | `BloomInputGroup` | Compose input fields with leading/trailing text addons, dropdown selects, and action buttons in a unified border container. | `bloom ui add input_group` |
| [Input OTP](https://bloom-platform-ten.vercel.app/ui/input-otp.md) | `BloomInputOtp` | Accessible one-time password / PIN entry with discrete animated slot boxes and separator styling. | `bloom ui add input_otp` |
| [Textarea](https://bloom-platform-ten.vercel.app/ui/textarea.md) | `BloomTextarea` | Multi-line expanded text input for paragraphs, descriptions, or code prompts. | `bloom ui add textarea` |
| [Checkbox](https://bloom-platform-ten.vercel.app/ui/checkbox.md) | `BloomCheckbox` | A 16x16px control that allows the user to toggle between checked, unchecked, and indeterminate states. | `bloom ui add checkbox` |
| [Radio Group](https://bloom-platform-ten.vercel.app/ui/radio.md) | `BloomRadioGroup` | A set of 16px circular check buttons where only one button can be checked at a time. | `bloom ui add radio` |
| [Switch](https://bloom-platform-ten.vercel.app/ui/switch.md) | `BloomSwitch` | A 32x18px control that allows the user to toggle between checked and unchecked states. | `bloom ui add switch` |
| [Slider](https://bloom-platform-ten.vercel.app/ui/slider.md) | `BloomSlider` | A 4px track slider with 12px white ring thumb for selecting values from a range. | `bloom ui add slider` |
| [Select](https://bloom-platform-ten.vercel.app/ui/select.md) | `BloomSelect` | Displays a 32px dropdown select picker matching shadcn base-nova styling. | `bloom ui add select` |
| [Combobox](https://bloom-platform-ten.vercel.app/ui/combobox.md) | `BloomCombobox` | Searchable autocomplete dropdown menu with multi-select tokenized chips support. | `bloom ui add combobox` |
| [Calendar](https://bloom-platform-ten.vercel.app/ui/calendar.md) | `BloomCalendar` | A date picker calendar component supporting single, range, and multiple date selections. | `bloom ui add calendar` |
| [Field](https://bloom-platform-ten.vercel.app/ui/field.md) | `BloomField` | A complete composable form field wrapper providing FieldLabel, FieldDescription, and FieldError slots. | `bloom ui add field` |

### Layout & Structure (5 components)

| Component | Dart Class | Description | CLI Command |
| :--- | :--- | :--- | :--- |
| [Card](https://bloom-platform-ten.vercel.app/ui/card.md) | `BloomCard` | Displays a card with title, description, content, action header slots, and a shaded border-divided footer. | `bloom ui add card` |
| [Accordion](https://bloom-platform-ten.vercel.app/ui/accordion.md) | `BloomAccordion` | A vertically stacked set of interactive headings that each reveal a section of content. | `bloom ui add accordion` |
| [Tabs](https://bloom-platform-ten.vercel.app/ui/tabs.md) | `BloomTabs` | A set of layered sections of content—known as tab panels—that are displayed one at a time. Supports pill and line underline variants. | `bloom ui add tabs` |
| [Skeleton](https://bloom-platform-ten.vercel.app/ui/skeleton.md) | `BloomSkeleton` | Used to show a placeholder while content is loading with a subtle pulse animation. | `bloom ui add skeleton` |
| [Progress](https://bloom-platform-ten.vercel.app/ui/progress.md) | `BloomProgress` | Displays a 4px height linear progress bar indicating completion of an operation. | `bloom ui add progress` |

### Feedback & Overlays (7 components)

| Component | Dart Class | Description | CLI Command |
| :--- | :--- | :--- | :--- |
| [Dialog](https://bloom-platform-ten.vercel.app/ui/dialog.md) | `BloomDialog` | A modal window that appears in front of app content with shaded footer and compound title/description slots. | `bloom ui add dialog` |
| [Alert Dialog](https://bloom-platform-ten.vercel.app/ui/alert-dialog.md) | `BloomAlertDialog` | A modal dialog that interrupts the user with important content and expects a response. | `bloom ui add alert_dialog` |
| [Alert](https://bloom-platform-ten.vercel.app/ui/alert.md) | `BloomAlert` | Displays a callout for user attention with 10x8px padding and soft status tints. | `bloom ui add alert` |
| [Sheet](https://bloom-platform-ten.vercel.app/ui/sheet.md) | `BloomSheet` | Extends the Dialog component to display 4-directional slide-over drawers (left, right, top, bottom). | `bloom ui add sheet` |
| [Drawer](https://bloom-platform-ten.vercel.app/ui/drawer.md) | `BloomDrawer` | A swipeable gesture bottom sheet with drag handle and spring snap points. | `bloom ui add drawer` |
| [Sonner / Toast](https://bloom-platform-ten.vercel.app/ui/sonner.md) | `BloomSonner` | An opinionated toast notification system with success, error, warning, and loading status styles. | `bloom ui add sonner` |
| [Dropdown Menu](https://bloom-platform-ten.vercel.app/ui/dropdown-menu.md) | `BloomDropdownMenu` | Displays a menu to the user—such as a set of actions or functions—triggered by a button. | `bloom ui add dropdown_menu` |

### Data Display & AI (5 components)

| Component | Dart Class | Description | CLI Command |
| :--- | :--- | :--- | :--- |
| [Avatar](https://bloom-platform-ten.vercel.app/ui/avatar.md) | `BloomAvatar` | An image element with a fallback monogram for representing the user with 24/32/40px sizes and AvatarGroup. | `bloom ui add avatar` |
| [Badge & Chip](https://bloom-platform-ten.vercel.app/ui/badge.md) | `BloomBadge` | Displays a 20px pill badge or interactive BloomChip with soft destructive and status tints. | `bloom ui add badge` |
| [Kbd](https://bloom-platform-ten.vercel.app/ui/kbd.md) | `BloomKbd` | A 20px height sans-serif keyboard shortcut token matching shadcn base-nova specifications. | `bloom ui add kbd` |
| [Table & Data Table](https://bloom-platform-ten.vercel.app/ui/table.md) | `BloomTable` | A responsive data table container with 40px headers, cell alignment, and sortable columns. | `bloom ui add table` |
| [Sidebar](https://bloom-platform-ten.vercel.app/ui/sidebar.md) | `BloomSidebar` | A composable, collapsible navigation sidebar system matching shadcn base-nova with groups, headers, and footer slots. | `bloom ui add sidebar` |

### Charts Suite (1 components)

| Component | Dart Class | Description | CLI Command |
| :--- | :--- | :--- | :--- |
| [Charts Suite](https://bloom-platform-ten.vercel.app/ui/chart.md) | `BloomChart` | Pure Dart token-driven chart suite supporting Area, Bar, Line, Pie, Radar, and Radial charts with responsive drag tracking. | `bloom ui add chart` |

### Composites & Shells (2 components)

| Component | Dart Class | Description | CLI Command |
| :--- | :--- | :--- | :--- |
| [Command Palette](https://bloom-platform-ten.vercel.app/ui/command-palette.md) | `BloomCommandPalette` | Fast, accessible command menu for searching actions, files, and navigation shortcuts. | `bloom ui add command_palette` |
| [App & Dashboard Shell](https://bloom-platform-ten.vercel.app/ui/app-shell.md) | `BloomDashboardShell` | Production responsive application frame combining top bar, collapsible sidebar, and responsive mobile nav. | `bloom ui add app_shell` |

---

## 📊 Complete List of Component Markdown Endpoints

Every component has a dedicated LLM markdown file:

- [Button (`BloomButton`)](https://bloom-platform-ten.vercel.app/ui/button.md): `bloom ui add button`
- [Button Group (`BloomButtonGroup`)](https://bloom-platform-ten.vercel.app/ui/button-group.md): `bloom ui add button_group`
- [Input (`BloomInput`)](https://bloom-platform-ten.vercel.app/ui/input.md): `bloom ui add input`
- [Input Group (`BloomInputGroup`)](https://bloom-platform-ten.vercel.app/ui/input-group.md): `bloom ui add input_group`
- [Input OTP (`BloomInputOtp`)](https://bloom-platform-ten.vercel.app/ui/input-otp.md): `bloom ui add input_otp`
- [Textarea (`BloomTextarea`)](https://bloom-platform-ten.vercel.app/ui/textarea.md): `bloom ui add textarea`
- [Checkbox (`BloomCheckbox`)](https://bloom-platform-ten.vercel.app/ui/checkbox.md): `bloom ui add checkbox`
- [Radio Group (`BloomRadioGroup`)](https://bloom-platform-ten.vercel.app/ui/radio.md): `bloom ui add radio`
- [Switch (`BloomSwitch`)](https://bloom-platform-ten.vercel.app/ui/switch.md): `bloom ui add switch`
- [Slider (`BloomSlider`)](https://bloom-platform-ten.vercel.app/ui/slider.md): `bloom ui add slider`
- [Select (`BloomSelect`)](https://bloom-platform-ten.vercel.app/ui/select.md): `bloom ui add select`
- [Combobox (`BloomCombobox`)](https://bloom-platform-ten.vercel.app/ui/combobox.md): `bloom ui add combobox`
- [Calendar (`BloomCalendar`)](https://bloom-platform-ten.vercel.app/ui/calendar.md): `bloom ui add calendar`
- [Field (`BloomField`)](https://bloom-platform-ten.vercel.app/ui/field.md): `bloom ui add field`
- [Card (`BloomCard`)](https://bloom-platform-ten.vercel.app/ui/card.md): `bloom ui add card`
- [Accordion (`BloomAccordion`)](https://bloom-platform-ten.vercel.app/ui/accordion.md): `bloom ui add accordion`
- [Tabs (`BloomTabs`)](https://bloom-platform-ten.vercel.app/ui/tabs.md): `bloom ui add tabs`
- [Skeleton (`BloomSkeleton`)](https://bloom-platform-ten.vercel.app/ui/skeleton.md): `bloom ui add skeleton`
- [Progress (`BloomProgress`)](https://bloom-platform-ten.vercel.app/ui/progress.md): `bloom ui add progress`
- [Dialog (`BloomDialog`)](https://bloom-platform-ten.vercel.app/ui/dialog.md): `bloom ui add dialog`
- [Alert Dialog (`BloomAlertDialog`)](https://bloom-platform-ten.vercel.app/ui/alert-dialog.md): `bloom ui add alert_dialog`
- [Alert (`BloomAlert`)](https://bloom-platform-ten.vercel.app/ui/alert.md): `bloom ui add alert`
- [Sheet (`BloomSheet`)](https://bloom-platform-ten.vercel.app/ui/sheet.md): `bloom ui add sheet`
- [Drawer (`BloomDrawer`)](https://bloom-platform-ten.vercel.app/ui/drawer.md): `bloom ui add drawer`
- [Sonner / Toast (`BloomSonner`)](https://bloom-platform-ten.vercel.app/ui/sonner.md): `bloom ui add sonner`
- [Dropdown Menu (`BloomDropdownMenu`)](https://bloom-platform-ten.vercel.app/ui/dropdown-menu.md): `bloom ui add dropdown_menu`
- [Avatar (`BloomAvatar`)](https://bloom-platform-ten.vercel.app/ui/avatar.md): `bloom ui add avatar`
- [Badge & Chip (`BloomBadge`)](https://bloom-platform-ten.vercel.app/ui/badge.md): `bloom ui add badge`
- [Kbd (`BloomKbd`)](https://bloom-platform-ten.vercel.app/ui/kbd.md): `bloom ui add kbd`
- [Table & Data Table (`BloomTable`)](https://bloom-platform-ten.vercel.app/ui/table.md): `bloom ui add table`
- [Sidebar (`BloomSidebar`)](https://bloom-platform-ten.vercel.app/ui/sidebar.md): `bloom ui add sidebar`
- [Charts Suite (`BloomChart`)](https://bloom-platform-ten.vercel.app/ui/chart.md): `bloom ui add chart`
- [Command Palette (`BloomCommandPalette`)](https://bloom-platform-ten.vercel.app/ui/command-palette.md): `bloom ui add command_palette`
- [App & Dashboard Shell (`BloomDashboardShell`)](https://bloom-platform-ten.vercel.app/ui/app-shell.md): `bloom ui add app_shell`