Visual Dictionary for UI Elements

A radial chart is a polar plot of concentric bars, so each value reads as an arc length around a shared center rather than a length from a straight baseline.

A radar chart is a polar plot of values on radiating axes, so a profile across several metrics reads as a polygon rather than a set of bars.

A pie chart is a circular plot of slices, so each value reads as a share of one whole rather than a length from a shared baseline.

A bar chart is a plot of rectangular bars along a categorical axis, so each value reads as a length from a shared baseline rather than a connected stroke.

A line chart is a plot of connected points along an ordered axis, so change over time reads as a stroke rather than a filled mass.

An area chart is a line plot with the region between the series and the baseline filled, so change over time reads as a shaded mass rather than a stroke alone.

A site header is the persistent top band — usually a banner landmark — that holds brand, primary navigation, and site-wide utilities so users can orient and move without leaving the page chrome.

A navigation bar is the primary link strip — usually a nav landmark — that lists top-level destinations inside the site header, separate from brand and utility actions.

A logo cloud is a compact grid or strip of brand marks — clients, partners, or integrations — shown together as social proof without asking the user to read a list.

A marquee is an endlessly looping strip of content — logos, quotes, or chips — that scrolls horizontally or vertically so a long set fits a short viewport without pagination.

A masonry layout packs items of varying heights into vertical columns — like a brick wall — filling gaps so the grid stays dense without empty row cells.

A bento grid is an asymmetric layout of unequal tiles — named after the Japanese bento box — where larger cells spotlight primary content and smaller ones hold supporting pieces.

An avatar group is a cluster of overlapping user images — compact circles that show team members, chat participants, or collaborators at a glance, often with a +N count for overflow.

A combobox is a searchable single-choice control — a text input paired with a filterable option list so users type to narrow long catalogs and pick one predefined value without leaving the form.

A popover is a click-open floating panel anchored to a trigger — revealing interactive content like a short form, picker, or settings cluster without leaving the page or blocking the full viewport.

A hover card is a rich floating preview that appears on hover or focus — anchored to a link, avatar, or mention to show structured context like a profile, link summary, or record detail without leaving the page.

A tooltip is a brief descriptive label that appears on hover or keyboard focus — anchored to a trigger element to explain an icon, control, or truncated text without leaving the page.

A data table is a tabular layout for browsing structured records — column headers, sortable rows, filtering, pagination, and row actions for datasets too large or interactive for a static HTML table.

A lightbox is a fullscreen media overlay that enlarges an image, video, or embed above a dimmed page — opened from a thumbnail with optional gallery navigation and minimal chrome.

A slider is a range input control that lets users pick a numeric value — or span of values — by dragging a thumb along a track with immediate visual feedback.

An input OTP is a fixed-length code entry control — individual slots that show expected length, auto-advance focus, and support paste for SMS, email, and two-factor verification codes.

A textarea is a multi-line input for longer free-form text — label, resizable control, and optional helper or error text for comments, descriptions, feedback, and other paragraph-length entry.

A text field is a single-line input for short free-form values — label, bordered control, and optional helper or error text for names, emails, search, and other typed entry.

A toggle group is a segmented row of toggle buttons that share one container — each item stays pressed or unpressed, with single-select or multi-select rules across the set.

A switch is a binary toggle control that slides between on and off states — a pill-shaped track and thumb that signals an immediate setting change when activated.

A radio group is a single-select list control that presents related options where only one choice can be active — circular indicators and labels, with each selection clearing the others.

A checkbox group is a set of related binary toggles that lets users select zero or more options — independent checkboxes under a shared legend, each with its own label.

A wizard is a multi-step flow that guides users through a complex task in ordered stages — step indicator, per-step content panels, and navigation actions that keep each screen focused.

A stepper is a progress guide through a finite sequence of steps — numbered indicators, labels, and connectors that show where the user is in a wizard or multi-step flow.

A context menu is a floating list of actions that opens on right-click or long-press over a target — offering commands relevant to what the user pointed at.

A navigation menu is a collection of site links — often with hover or focus flyouts — that helps users move between sections without leaving the top-level chrome.

A dropdown menu is a floating list of actions opened by a trigger — buttons, icons, or avatars — so users can run commands without leaving the page.

A select is a form control that lets users choose one option from a closed list. A trigger shows the current value, and a dropdown panel reveals the choices.

A sheet is a slide-out panel that enters from an edge of the screen — top, right, bottom, or left — to present supplementary content, forms, or actions without navigating away.

A drawer is a sliding panel that enters from an edge of the screen — bottom, top, left, or right — to present supplementary content or actions without navigating away.

An alert is an inline status banner that surfaces important feedback — success, warning, error, or neutral information — without blocking the page.

A timeline is a vertical sequence of events along a shared axis — markers, timestamps, and descriptions that make chronological order easy to scan.

A time input is a native form field that uses the browser's built-in time picker via type="time" — compact, accessible, and ideal for simple time-of-day entry.

A date input is a native form field that uses the browser's built-in date picker via type="date" compact, accessible, and ideal for simple single-date entry.

A date picker is a form field that opens a calendar popover for choosing a single date or range — combining a trigger, formatted label, and month grid.

A calendar is a date grid for browsing months and selecting days — single dates, ranges, or multiple days — often embedded in forms and popovers.

Tabs organize related content into labeled panels, showing one section at a time while keeping every option visible in a trigger row.

A carousel is a UI component that displays a series of images or content in a scrollable area. It is commonly used to showcase products, images, or other content in a visually appealing way.

An accordion is a UI component that displays a series of content in a vertically stacked list. It is commonly used to showcase products, images, or other content in a visually appealing way.

A breadcrumb is a UI component that displays a series of content in a horizontally stacked list. It is commonly used to showcase products, images, or other content in a visually appealing way.

A card is a UI component that displays a series of content in a horizontally stacked list. It is commonly used to showcase products, images, or other content in a visually appealing way.

A dialog is a modal surface that appears above the page to capture focused attention for a task, decision, or message.