95 package owners + source components

The complete Brick catalog

Search when you know the name, or start with the interface problem you need to solve. Every result opens a live example and a consumer-first guide.

Start with the outcome

What are you building?

Browse by purpose when you know the job but not yet the component name.

Component finder

Find the right finished part

96 results

Actions & selection

Button

Actions & selection

Button presents a finished action or emphasized native link.

Icon Button

Actions & selection

IconButton presents one named icon-only action or a button-styled native link with finished Brick geometry and recipes over public Atom Button behavior.

Pagination

Actions & selection

Pagination navigates a finite, known set of numbered pages with native buttons or real URL destinations.

Reorderable List

Actions & selection

Reorderable List is Brick's finished manual-order composition, backed by the published `@flowstack-ui/atom@0.23.0` Reorder behavior.

Segment Group

Actions & selection

Segment Group is Brick's compact single-choice mode control.

Toggle

Actions & selection

Toggle is a persistent pressed/unpressed command built on Atom Toggle with Brick visual recipes.

Toggle Group

Actions & selection

ToggleGroup coordinates related single- or multiple-selection pressed commands using Atom state and keyboard behavior plus Brick recipes.

Toolbar

Actions & selection

Toolbar presents related commands as one named, keyboard-navigable control group.

Forms & choices

Checkbox

Forms & choices

Checkbox is a styled binary or mixed-state form choice built on Atom Checkbox.

Checkbox Group

Forms & choices

CheckboxGroup coordinates related Checkbox-style items, optional item text, and an aggregate parent control.

Color Picker

Forms & choices

Color Picker provides a finished Atom-backed control for editing, choosing, and submitting one opaque hexadecimal color.

Combobox

Forms & choices

Combobox is Brick's finished searchable single-value choice control.

Field

Forms & choices

Field coordinates one control’s label, description, error, and required state.

Fieldset

Forms & choices

Fieldset coordinates a related control group with a legend, description, and group error.

File Upload

Forms & choices

File Upload is Brick's styled file picker, drop target, and removable selected-file list, backed directly by Atom.

Form

Forms & choices

Form is Brick’s styled form boundary over Atom’s native form behavior.

Input

Forms & choices

Input is a finished single-line text-entry control built on Atom Input.

Multi Select

Forms & choices

MultiSelect is Brick's styled multiple-value choice control.

Number Input

Forms & choices

Number Input is a finished numeric entry control backed by Atom Number Input.

OTP Field

Forms & choices

OTP Field is segmented one-time-code entry backed by Atom OTP Field.

Password Toggle Field

Forms & choices

Password Toggle Field is native password entry with an explicitly named visibility action, backed by Atom Password Toggle Field.

Radio Group

Forms & choices

Radio Group is Brick's finished single-selection control for short visible choice sets.

Rating

Forms & choices

Rating is Brick's styled score input and aggregate display.

Select

Forms & choices

Select is Brick's finished single-value, select-only choice control.

Slider

Forms & choices

Slider is Brick's styled numeric single-value and range input, backed by Atom 0.19.6.

Switch

Forms & choices

Switch is Brick's finished binary setting control.

Textarea

Forms & choices

Textarea is Brick's finished native multi-line plain-text control.

Typography

Blockquote

Typography

Blockquote composes a semantic extended quotation, optional source URL, and attribution with finished Brick styling.

Code

Typography

Code renders short inline technical text with native `code` semantics and finished Brick recipes.

Code Block

Typography

Code Block presents structured multi-line source with native scrolling, explicit language metadata, and truthful Atom-backed copy behavior.

Em

Typography

Em renders native stress emphasis while inheriting the surrounding Brick typography and foreground.

Highlight

Typography

Highlight discovers literal queries in plain text through exact Atom behavior and renders finished semantic match styling.

Kbd

Typography

Kbd renders native keyboard-input notation with finished Brick sizing and visual recipes.

Mark

Typography

Mark renders a native static marked passage with restrained, theme-aware Brick paint.

Prose

Typography

Prose applies coherent descendant typography, rhythm, and readable measure to trusted React content.

Text

Typography

Text is Brick's finished family for authored headings, paragraphs, inline copy, captions, supporting descriptions, and status copy.

Rich Text Editor

TypographySource

A source-installed rich-text writing surface composed from Brick controls and Tiptap editing behavior.

Content & status

Accordion

Content & status

Accordion coordinates named, in-flow disclosure sections with single or multiple selection, accessible keyboard navigation, and finished surfaces.

Avatar

Content & status

Avatar presents an image or fallback identity in a finished Brick frame.

Badge

Content & status

Badge is a compact passive label for categories, status, or short metadata.

Card

Content & status

Card is a static compound surface for grouping information and related actions about one subject.

Chip

Content & status

Chip presents one compact authored or selected value with an optional, explicitly named remove action.

Collapsible

Content & status

Collapsible reveals one independent in-flow content region from a linked button trigger.

Color Swatch

Content & status

Color Swatch provides a finished passive preview for one CSS color or a compact mix of colors.

Divider

Content & status

Divider draws a low-emphasis structural line between adjacent content groups.

Icon

Content & status

Icon gives one consumer-supplied SVG a consistent Brick size, semantic color, alignment, direction, and accessibility mode.

Image

Content & status

Image presents ordinary raster or vector media with authored alternative text, deterministic loading/fallback anatomy, fit and focal-position recipes, stable aspect ratio, and f…

List

Content & status

List presents related static content through native unordered or ordered list semantics, finished markers and boundaries, and optional structured row anatomy.

Notification Badge

Content & status

NotificationBadge overlays a visual count or dot on exactly one child.

Progress

Content & status

Progress is Brick's linear, read-only task-progress component for known, unknown, and buffered work.

Progress Circle

Content & status

Progress Circle is Brick's compact circular task-progress component for known and unknown work.

Skeleton

Content & status

Skeleton preserves expected content geometry while an application-owned loading operation is incomplete.

Status

Content & status

Status presents one compact passive state with a semantic indicator and a visible readable label, or a decorative indicator beside text that already carries the same state.

Table

Content & status

Table presents static row-and-column relationships with native HTML semantics, finished visual recipes, logical alignment, and explicit responsive containment.

Toast

Content & status

Toast reports a temporary, non-blocking application outcome or process update.

Overlays & menus

Alert Dialog

Overlays & menus

AlertDialog interrupts the current workflow for a brief, important decision that requires an explicit response.

Context Menu

Overlays & menus

Context Menu provides commands for a pointer or touch context region through Atom-owned semantics and behavior.

Dialog

Overlays & menus

Dialog presents a focused modal task or information surface above the current page.

Drawer

Overlays & menus

Drawer is a modal task surface that enters from a logical or physical edge.

Dropdown Menu

Overlays & menus

Dropdown Menu provides button-triggered commands, persistent choices, and nested actions through Atom-owned semantics and behavior.

Hover Card

Overlays & menus

HoverCard shows nonessential preview information from a link-like trigger.

Menubar

Overlays & menus

Menubar provides persistent desktop-style command categories through Atom-owned semantics and behavior.

Popover

Overlays & menus

Popover presents click-open contextual content anchored to a trigger or anchor.

Tooltip

Overlays & menus

Tooltip supplies a short supplementary label or description for a trigger.

Navigation & layout

App Bar

Navigation & layout

AppBar is a top surface and one-row alignment structure built on Atom AppBar.

Appearance

Navigation & layout

Appearance applies an explicit light, dark, or inherited semantic-token scope to one native or existing Brick host.

Bleed

Navigation & layout

Bleed lets authored content extend beyond the inset of its immediate container using responsive, theme-aware logical spacing.

Bottom Navigation

Navigation & layout

Bottom Navigation presents three to five stable, equal-priority top-level destinations in a compact navigation surface.

Breadcrumb

Navigation & layout

Breadcrumb is Brick's finished hierarchy trail.

Container

Navigation & layout

Container creates a centered, fluid content boundary with a closed maximum measure and logical inline gutters.

Frame

Navigation & layout

Frame owns responsive logical size constraints for one local element.

Grid

Navigation & layout

Grid is Brick's two-dimensional layout primitive.

Group

Navigation & layout

Group creates a compact inline visual cluster and can attach direct children without changing their semantics or keyboard behavior.

Hide

Navigation & layout

Hide keeps content mounted while removing it from visual layout from one fixed viewport breakpoint.

Link

Navigation & layout

Link is Brick's finished typographic navigation component.

Link Box

Navigation & layout

Link Box expands one real Brick Link across a containing region while keeping secondary controls outside that anchor.

Nav List

Navigation & layout

Nav List renders finished native navigation lists, current destinations, and optional grouped disclosure sections on Atom NavList behavior.

Scroll Area

Navigation & layout

Scroll Area constrains native browser scrolling to explicit axes while keeping content, input, momentum, and platform scrollbar behavior native.

Section

Navigation & layout

Section owns responsive logical block rhythm for major page and application regions.

Show

Navigation & layout

Show keeps content mounted and adds it to visual layout from one fixed viewport breakpoint.

Sidebar

Navigation & layout

Sidebar coordinates a finished persistent complementary panel with main content on Atom Sidebar state and accessibility behavior.

Stack

Navigation & layout

Stack is Brick's one-dimensional layout primitive.

Surface

Navigation & layout

Surface paints a semantic region with a controlled tone and background level, optional border, elevation, radius, and inset.

Tabs

Navigation & layout

Tabs switches between related peer panels while preserving complete keyboard, selection, and panel relationships through Atom.

ZStack

Navigation & layout

ZStack is Brick's depth-layout primitive.

Data & collections

Carousel

Data & collections

Carousel presents one peer slide at a time with native touch scrolling and optional finished controls.

Data Grid

Data & collections

Data Grid presents tabular data with Atom-owned cell navigation, row selection, active-cell semantics, and sortable-header activation.

Data List

Data & collections

Data List presents repeated term/value metadata with native description-list semantics and responsive Brick recipes.

Feed

Data & collections

Feed presents a styled dynamic stream of rich, focusable articles.

Swipeable Item

Data & collections

Swipeable Item is a styled three-part boundary that reveals quick actions from logical start or end.

Tree

Data & collections

Tree presents a one-dimensional hierarchy with Atom-owned focus, keyboard, selection, expansion, typeahead, direction, form, and accessibility behavior.

Tree Grid

Data & collections

Tree Grid presents hierarchical rows with Atom-owned cell navigation, expansion, selection, active-cell semantics, and sortable-header activation.

Accessibility

Aspect Ratio

Accessibility

Aspect Ratio reserves stable width-to-height geometry for authored media, embeds, placeholders, and layout content.

Skip Link

Accessibility

Skip Link provides a finished, visible-on-focus bypass link and its matching primary-content destination.

Visually Hidden

Accessibility

Visually Hidden keeps authored text available to assistive technology while removing its visual layout footprint.