Components

Button

Trigger actions and guide users through primary and secondary flows.

Dropdown

Show contextual actions and compact option lists from a trigger.

Accordion

Progressively reveal sections of related content without overwhelming the page.

Avatar

Represent a person, account, or entity with an image, initials, or icon.

Badge

Highlight counts, labels, and compact metadata in a small visual container.

Icon

Add visual cues and reinforce meaning in buttons, statuses, inputs, and more.

Status

Communicate system state, semantic meaning, or workflow progress at a glance.

Table

Present structured data in rows and columns with clear scanning patterns.

Tag

Label content, categories, or states with a lightweight visual marker.

Alert

Surface important inline messages that need user attention in context.

Dialog

Interrupt the flow when users need to review, confirm, or complete a focused task.

Drawer

Present secondary content or actions in a sliding panel alongside the main view.

Empty State

Explain empty or no-results views and guide users to a next step.

Notification

Communicate important updates inside the interface without blocking progress.

Progress

Show completion state, task advancement, or loading progression.

Spinner

Indicate background activity when a precise progress value is unavailable.

Toast

Deliver brief transient feedback after an action or system event.

Tooltip

Reveal helper text or additional context on hover, focus, or tap.

Checkbox

Let users select one or more options from a set.

Date Picker

Collect dates and times with a structured calendar or time selection flow.

Input

Capture short freeform text, numbers, and common single-line entries.

Radio

Support a single choice from a set of mutually exclusive options.

Select

Expose a controlled list of options when freeform entry is not appropriate.

Slider

Let users choose a value or range along a continuous scale.

Switch

Toggle a setting on or off with a clear binary control.

Textarea

Capture longer multi-line text such as comments or descriptions.

Card

Group related content and actions inside a flexible visual container.

Divider

Separate content areas and reinforce structure without adding heavy chrome.

Page Title

Frame page-level hierarchy with a clear heading and optional supporting content.

Breadcrumb

Show the current location in a hierarchy and support quick backtracking.

Side Menu

Navigate between sections with a persistent vertical menu.

Steps

Guide users through a multi-step flow with clear progress.

Tab

Switch between related views within the same context.