Accordion

Expandable sections that show or hide related content on demand.

Alert Bar

Persistent banner that communicates important messages across the page.

Alert Modal

Overlay dialog that requires user acknowledgment before continuing.

Avatar

Visual representation of a user or entity, supporting images and initials.

Billboard

Full-width hero section for showcasing primary content and calls to action.

Breadcrumb

Secondary navigation trail showing the user's location in the hierarchy.

Button

Interactive control that triggers an action, available in multiple variants.

Card

Contained surface grouping related content and actions for a single subject.

Carousel

Horizontally scrollable container for browsing multiple items in sequence.

Checkbox

Binary selection control allowing users to check or uncheck individual options.

Chip

Compact element used for tags, filter options, or dynamic content selections.

Date Picker

Calendar interface for selecting a single date or a date range.

Dialog

Modal window presenting content requiring user interaction or confirmation.

Divider

Visual separator line that groups or distinguishes sections of content.

Dropdown

Collapsible menu revealing a list of options when triggered.

Empty State

Placeholder content shown when there is no data or results to display.

Icon

Scalable visual symbols used to reinforce meaning and improve scannability.

Input (Text)

Single-line text field for collecting short user input like names or emails.

Link

Navigational element enabling users to move between pages or sections.

List

Vertically stacked rows for presenting collections of related items.

Navigation Bar

Primary navigation structure providing access to main sections of the app.

Pagination

Controls for navigating through multi-page content sets.

Progress Loader

Visual indicator communicating the completion status of an ongoing task.

Radio Button

Single-select control allowing users to choose one option from a group.

Search

Input field optimized for querying and filtering content across the product.

Select

Native form control for choosing a single value from a predefined list.

Skeleton

Animated placeholder showing the layout shape while content is loading.

Spinner

Indeterminate loading indicator for operations with unknown completion time.

Switch

Binary toggle control for enabling or disabling a setting immediately.

Table

Structured grid for displaying and comparing data across rows and columns.

Tabs

Horizontal navigation pattern organizing related content into selectable panels.

Text Area

Multi-line input field for capturing longer-form text content from users.

Toast / Snackbar

Brief, auto-dismissing notification appearing at the edge of the screen.

Tooltip

Contextual label appearing on hover to provide additional information.