UI element library

A compact navigation region anchored to the bottom edge that switches among a small set of primary destinations.

An ordered set of stages that communicates progress through a multi-step task.

A section index whose current link follows the heading currently in view.

Controls for moving among discrete pages of a result set.

A site header is a page region that may contain identity and utilities. A navigation bar is a set of links to destinations.

A compact trigger that reveals navigation in a panel, often on a narrow screen.

A menu trigger that collects secondary actions not shown in the primary interface.

A searchable launcher for actions and destinations, usually opened by a button or keyboard shortcut.

A set of peer labels that switches one shared content panel at a time.

A short path of ancestor links that places the current page within a hierarchy.

A two-dimensional collection of related records arranged by rows and labeled columns.

A sequence of dated events arranged in chronological order.

A compact visual indicator that communicates a person's presence or an item's current state.

A visual container for one message in a conversation between participants.

A compact presentation of several people associated with a shared item or activity.

A content container with named media, header, body, metadata, and footer regions.

A display rule that shortens text at one line or a set line count and marks the omission.

A stack of labeled sections whose content can be expanded or collapsed.

A badge reports a compact status or count. A chip is an interactive value or filter. A pill describes a rounded shape. A tag labels content.

A region that explains why expected content is absent and what a person can do next.

A selection control that lets a person choose more than one value from a known set.

A form that collects the credentials or identity-provider choice needed to start an account session.

A control for entering one date or choosing a date or range from a calendar.

A small grip at the edge or corner of a resizable control that can be dragged to change its dimensions.

A single data-entry control with a persistent label, optional placeholder, helper text, and validation state.

An interaction for moving an item to another position or destination by dragging it.

An editable or select-only input paired with a popup of allowed values or suggestions.

A visible indicator that identifies the current keyboard focus target, commonly shown with the :focus-visible state.

A switch turns one setting on or off, a checkbox selects independent options, and a radio group selects one option from a set.

A connected row of compact options that keeps one view or mode selected at a time.

Three notice placements have different roles. An inline alert belongs to a task or field, a callout explains nearby content, and a banner spans a page or region.

An overlay that presents an enlarged image or media item above the page.

A progress bar or ring reports measurable completion. A spinner communicates an indeterminate wait.

A brief, non-blocking message that confirms or reports a recent action.

A modal dialog interrupts the page for a focused task. A drawer is a side panel. A sheet is a panel that rises from an edge, often on mobile.

A popover holds related supplementary content, a dropdown menu offers actions or choices, and a tooltip provides brief non-interactive help.

A visual layer behind an overlay that separates it from and de-emphasizes the underlying page.

A skeleton reserves the shape of expected content. A spinner indicates an indeterminate process without a known result shape.

A contextual preview that appears near a referenced item when it receives hover or focus.

A scroll effect in which visual layers move at different rates to suggest depth.

A viewport that presents one or more items from a larger sequence, with controls for changing the visible slides.

A grid of related content blocks that uses varied spans or sizes within one aligned layout.

A multi-column arrangement that packs items with different heights into vertical columns.

A motion curve that controls how an animation accelerates and decelerates over time.

A physics-inspired transition that overshoots or settles in response to stiffness and damping.

A brief character replacement effect that resolves into a final text string.

A continuously moving strip of repeated or sequential content.

An HTML <hr> marks a thematic break in content, role=separator marks a boundary between control groups, and a CSS border is purely visual.

Sticky positioning stays within its scroll container while scrolling. Fixed positioning removes an element from normal flow and anchors it to the viewport or a transformed containing block.

A native application frame that contains a title, toolbar, content, resizing edges, and system window controls.

A master-detail workspace with a list of items beside the selected item's content.

A viewport that displays content larger than its available area and provides scrolling.

A hierarchical browser that opens the next level of items in a new adjacent column.

A contextual panel that displays or edits properties of the current document, selection, or tool.

A persistent source list for switching among related locations, collections, or filters within a window.

A row of window-level actions visually integrated with the title region.

The native close, minimize, and zoom controls in a macOS application window.

A primary action joined to a separate menu trigger for closely related alternatives.

The operating-system region that groups application-wide commands into persistent menus.

A menu of commands related to the selected item or location, opened in its immediate context.

A native disclosure indicator showing whether associated content is expanded or collapsed.

A temporary panel anchored to the control or item that opened it.

A pop-up button chooses a value, a pull-down button opens actions, and a combo box combines text entry with suggestions or choices.

A connected set of compact options for choosing one mode or view.

A native app status item placed in the macOS menu bar with a compact icon or value and an optional menu.

The system-drawn position marker that shows where the next typed character will appear in editable text.

The pointer shape that changes to communicate the kind of interaction available at the current location.

A continuous control for adjusting audio output level within a bounded range.

A two-part color control that shows the current color, opens quick swatches, and provides access to a full color panel.

A text field specialized for entering a query, with search, clear, and sometimes recent-query behavior.

An editable field that turns recognized entries into separate removable values.

A compact graphic that displays a bounded measurement, capacity, or rating.

The system focus treatment that identifies the control receiving keyboard input.

A compact pair of controls for increasing or decreasing a numeric value by a fixed increment.

A system alert that confirms a high-impact action before permanently removing a group of discarded items.

A native file panel for naming an output and selecting where and in what format it will be saved.

A short count or status label displayed over an app icon in the macOS Dock.

A floating utility panel that provides color selection or related editing controls while another document remains in context.

A document-attached confirmation panel for an action that affects the current document or window.

A native translucent surface that blends with content behind it while keeping foreground controls readable.