Patterns

A collection screen composition: sidebar shell, header, filter toolbar, and a searchable/filterable invoice table with table/grid views and full loading/empty/error state coverage.

An AI assistant workspace with a conversation list, a streaming chat transcript with explainability labels, an agent activity feed, and a prompt composer.

A single-record create/edit form page with a header, grouped fields, an attachments upload area, and dirty-aware save/cancel actions.

A dashboard composition skeleton: page layout wiring the sidebar shell, header, metric row, chart panel, and data table via standalone block items.

An entity detail page presenting one primary record with its fields, activity history, threaded comments, and approve/reject actions.

A long-form document authoring workspace combining an inline-editable document body with in-context comments and file attachments.

A high-density human communication inbox for searching, filtering, assigning, and resolving incoming conversations.

A login page with a muted background color.

A guided first-run workspace setup flow with a step progress indicator, a details form, a logo upload, an invite empty state, and back/continue actions.

A high-density planning board for moving work items across workflow-status columns.

A historical revenue report combining a period filter, a KPI metric row, a trend chart, and a detailed data table for deep analysis.

A workspace settings/admin screen with a sidebar shell, tabbed sections, a profile form, notification and security toggle sections, and dirty-aware save actions.

A transactional upgrade/checkout flow with a step indicator, plan selection, a billing form, an order summary, and progress-to-commit actions.

A presentational, controlled sticky footer with a primary and secondary action.

A presentational, controlled chronological activity/audit stream with actor avatars.

A presentational, controlled list of AI chat threads with active selection and a new-conversation action.

A presentational, controlled inline AI-generated/confidence provenance label with a tooltip explanation.

A presentational, controlled prompt input with attach and send controls.

A presentational, controlled top navigation bar shell with a brand mark, nav links, and sign-out action.

A controlled workflow-status lane with ordered work-item cards and drag-and-drop status transitions.

A presentational, controlled breadcrumb trail showing location context within a hierarchy, with the current page as the final crumb.

An interactive time-series area chart with range toggle (extracted from dashboard-01).

A presentational, controlled order line-item summary with total and a confirm action.

A presentational, controlled responsive card grid for browsing and selecting a collection item.

A presentational, controlled cmd+k command palette dialog with grouped, searchable items.

A presentational, controlled threaded comment list with a reply composer.

A controlled high-density inbox queue for prioritizing human conversations and applying assignment, snooze, or close actions.

A sortable, selectable data table with drag-reorder, tabs, and a row inspector drawer (extracted from dashboard-01).

A presentational, controlled record summary card with labelled fields and a status badge.

A presentational, controlled inline-editable long-form document body with a title field, save-state indicator, and in-context attachments.

A presentational, controlled side panel for inspecting and editing one record without leaving the list.

A presentational, controlled no-data illustration with a title, description, and a primary call-to-action.

A presentational, controlled error/permission-denied message with a retry action.

A presentational, controlled drag-and-drop / picker upload zone with a file list.

A presentational, controlled filter toolbar with search, status select, and a table/grid view switcher.

A card-framed email/password login form with field labels and submit action (extracted from login-03).

A presentational placeholder of skeleton rows for a loading region.

A presentational, controlled focused edit task in a dialog, with a labelled field and confirm/cancel actions.

A presentational, controlled bell-trigger popover listing notifications with an unread-count badge.

A sticky site header with sidebar trigger, page title, and action slot (extracted from dashboard-01).

A presentational, controlled plan/tier card set with features and a select action.

A presentational, controlled grouped settings card with inline toggle rows.

A sidebar that collapses to icons.

A responsive row of KPI stat cards with trend badges (extracted from dashboard-01).

A presentational, controlled segmented-tabs switcher for toggling between views/segments of the same data.

A presentational, controlled horizontal step indicator with active and complete states, composed from separator and badge.