UI Component Encyclopedia

Button

Triggers an action or event when clicked. The most fundamental interactive element in any UI.

CTAAction Button

Button Group

Groups related buttons together to form a cohesive set of actions.

Button BarToolbar

Floating Action Button

A circular button that floats above the UI to promote a primary action.

FABSpeed Dial

Icon Button

A button that displays only an icon, used for compact actions.

Icon ActionTool Button

Dropdown ButtonCombo Button

Split Button

Combines a default action with a dropdown for additional options.

Data Input

10 components

Checkbox

Allows users to select one or more options from a set of choices.

CheckTick Box

Radio Button

Allows users to select exactly one option from a set of mutually exclusive choices.

RadioOption Button

Select

Presents a list of options in a dropdown overlay for single selection.

DropdownPicker

Combobox

Combines a text input with a filterable dropdown list for enhanced selection.

AutocompleteType-ahead

Date Picker

Allows users to select a date or date range through a calendar interface.

CalendarDate Input

File Upload

Enables users to select and upload files through drag-and-drop or file browser.

File InputDropzone

Slider

Lets users select a value or range from a continuous spectrum by dragging a thumb.

RangeTrack Bar

Switch

A binary control that immediately toggles between two states (on/off).

ToggleToggle Switch

Text Input

A single-line text field for capturing short-form user input.

InputText Field

Color ChooserColor Selector

Color Picker

Allows users to select a color through various interfaces like spectrum, swatches, or input.

Data Display

9 components

Profile PictureUser Image

Avatar

Represents a user or entity with an image, icon, or initials.

Badge

A small status indicator or label used to highlight information.

ChipLabel

Card

A container for grouping related content and actions about a single subject.

TileContent Card

List

Displays a continuous group of related items vertically.

List ViewItem List

Table

Displays structured data in rows and columns with optional sorting, filtering, and pagination.

Data TableData Grid

Tree View

Displays hierarchical data in an expandable/collapsible tree structure.

TreeDirectory Tree

Tag

A compact element used for categorization, filtering, or displaying metadata.

ChipLabel

Rating

Allows users to rate or view ratings using a visual scale (typically stars).

Star RatingReview

Stat

Displays a numerical value with a label, often used in dashboards and summaries.

MetricKPI

Feedback

6 components

BannerNotification Banner

Alert

Displays an important message to attract the user's attention without interrupting workflow.

Toast

A brief, auto-dismissing message that appears temporarily to provide feedback.

SnackbarNotification

Loading BarProgress Indicator

Progress Bar

Indicates the completion progress of a task or operation.

Loading SpinnerActivity Indicator

Spinner

An animated indicator showing that content or a process is loading.

Skeleton ScreenPlaceholder

Skeleton

A placeholder UI that mimics the layout of content while it loads.

Empty State

Displayed when there is no content to show, guiding users toward taking action.

Zero StateBlank State

Overlay

5 components

Dialog

An overlay window that requires user interaction before returning to the main content.

ModalPopup

Drawer

A panel that slides in from the edge of the screen, overlaying the content.

SheetSide Panel

Popover

Displays rich content in a floating panel anchored to a trigger element.

PopupFlyout

Tooltip

A small text popup that appears on hover or focus to describe an element.

HintInfo Tip

Dropdown Menu

A menu that appears on trigger, displaying a list of actions or options.

Context MenuAction Menu

Layout

6 components

Accordion

Vertically stacked sections that expand and collapse to reveal content.

CollapseExpandable

Carousel

Displays a series of content items that users can cycle through horizontally.

SliderSlideshow

Divider

A visual separator used to divide sections of content.

SeparatorRule

Grid

A two-dimensional layout system for organizing content in rows and columns.

Grid LayoutCSS Grid

Stack

Arranges children elements in a vertical or horizontal stack with consistent spacing.

VStackHStack

Hero

A prominent section typically at the top of a page with a headline, description, and CTA.

Hero SectionBanner

Typography

5 components

Heading

Typography component for section titles and content headings.

TitleH1-H6

Text

A flexible typography component for body text, captions, and other content.

ParagraphBody

Blockquote

Highlights a quotation or excerpt with distinctive visual styling.

QuoteCitation

Code SnippetSyntax Highlight

Code Block

Displays formatted code with optional syntax highlighting and copy functionality.

Label

Associates a text description with a form control for accessibility and clarity.

Form LabelField Label