Component Patterns

Users navigate content or UI with three or more hierarchy levels and need a persistent trail showing their location and a way to step back

Power users need fast keyboard-driven access to any action, page, or setting without navigating the UI manually

Primary navigation for applications with 5+ destinations, nested hierarchies, or contextual sub-navigation that benefits from persistent visibility

A single view contains distinct sections of content that users switch between without leaving the page, and all sections are roughly equally important

Site-wide navigation for products with a flat link structure, a persistent logo, and global actions like search or account menus

Users need awareness of recent actions by themselves or others in a shared system, in roughly chronological order

Time-bound items need to be visualized relative to each other and to specific dates, and users schedule or review events by date context

Multiple data visualizations need to coexist on a single screen to give users a comprehensive operational or analytical overview

Displaying structured records where users need to compare values, sort columns, or take bulk actions across multiple rows

Users need to navigate, browse, or manage a hierarchical structure of folders and files where nesting depth is a meaningful organizational concept

Work items progress through a defined sequence of stages and users need to visualize and manage that flow visually

A dashboard or summary page needs to surface 3–8 key metrics at a glance with at-a-glance comparison to a previous period

Presenting a sequence of events with timestamps where the order and time relationships between events matter to the reader

Users need to narrow a large dataset by multiple independent dimensions, and the filter criteria are numerous enough to warrant a dedicated panel

Users need to edit individual fields in place without navigating to a separate edit page or opening a modal, and the editable context is clear

Users must authenticate to access a product, with one or more of: password credentials, social OAuth providers, or passwordless magic link

A form or onboarding flow is too complex or contextually dependent to present on one screen, and steps have a logical sequential dependency

Users need to find specific items within a large or unstructured dataset by typing a query, with optional faceted filtering

Users configure persistent preferences across multiple categories that belong to a single account, workspace, or entity

A responsive grid of content cards where each item has roughly equal visual weight and no single item is prioritized over others

The persistent shell layout for a SaaS or internal tool app, housing sidebar navigation, a topbar, and a scrollable main content area

The first viewport of a marketing or landing page where the primary value proposition and CTA live

A vertical list of homogeneous items where scanning, selecting, and acting on individual rows is the primary interaction

A two-column layout where selecting an item in the left pane loads its detail in the right pane, both scrolling independently

Requiring explicit user confirmation before executing an irreversible or high-consequence action such as deleting, disconnecting, or permanently modifying data

A list, table, dashboard, or content area has no items to show, whether because the user has none yet or because a search or filter returned nothing

Communicating that a data fetch, action, or system process has failed, with enough context for the user to understand what happened and what to do next

Placeholder UI shown in the exact shape of expected content while data is being fetched, to reduce perceived load time

An overlay that blocks interaction with the rest of the page to present a focused task, form, or information that requires attention before continuing

Communicating a transient status message (success, error, info, warning) that results from a user action and does not require a response

A long-form article or documentation page where the reader needs orientation tools (table of contents, reading progress) to navigate and consume multi-section content

A detailed matrix comparing feature availability across multiple product tiers or competitors, used by evaluators who need to audit specific capabilities

A post-signup sequence that guides a new user to their first meaningful moment of value in the product

Presenting two to five subscription or product tiers side by side so visitors can compare prices and choose a plan

A section presenting customer quotes, logos, or ratings to build trust and reduce purchase hesitation on a marketing or landing page

A conversational UI where the user exchanges messages with a human or AI, including support for streaming responses and message history

An IDE-style layout combining a file/project tree, one or more code editor panes, and an output or terminal panel for a browser-based coding environment

A triggered overlay listing a set of actions or options, grouped logically, that apply to the trigger element or the selected context

A dropdown or sidebar panel that displays a chronological or grouped list of past and present notifications for the logged-in user

A compact card displaying a user's identity (avatar, name, role) with contextual action buttons for interacting with or managing that user