GPUI component patterns. Click a card to view source and live WASM preview.
User avatars with name initials and optional images. Uses ui::avatar::Avatar.
A count badge with dot and icon variants. Uses ui::badge::Badge.
Navigation breadcrumbs with clickable items. Uses ui::breadcrumb::{Breadcrumb, BreadcrumbItem}.
Primary, secondary, danger, ghost, and outline button variants.
A titled container with fill variant. Uses ui::group_box::GroupBox.
Key-value data display with label and value pairs. Uses ui::description_list::{DescriptionList, DescriptionItem}.
Horizontal and vertical dividers with optional labels. Uses ui::divider::Divider.
Vector icons with size and color variants. Uses ui::Icon and ui::IconName.
Form controls: checkbox, switch, radio. Uses ui primitives.
Keyboard shortcut labels. Uses ui::Kbd with Keystroke from gpui.
A text label with optional secondary text and highlights. Uses ui::label::Label.
Clickable link elements with optional href. Uses ui::link::Link.
Alert banners with different severity levels. Uses ui::alert::Alert.
A progress bar showing completion percentage. Uses ui::progress::Progress.
Placeholder loading skeletons with primary and secondary variants. Uses ui::skeleton::Skeleton.
A range slider with draggable thumb. Uses ui::Slider + SliderState.
Loading spinner with size and color variants. Uses ui::spinner::Spinner.
A proper workspace with dock panels using ui::Workspace and ui::dock primitives.
Coloured tags with variants: primary, secondary, success, danger, warning.
Interactive toggle buttons for selection. Uses ui::button::{Toggle, ToggleGroup}.
