The UI Component Naming Guide: 170 Web and Mobile Patterns for Mockups and Specs

Terminology note: the provider names, repository names, and pattern names in the source list are factual references from public documentation. The grouping in this article is an editorial taxonomy for product mockups and front-end specifications, not a universal standard. The examples are compact Tailwind mockups embedded directly in the article. They are not vendor screenshots, and each one links to a standalone version you can open or paste into an online code tester.

When preparing a mockup, use these names as labels in the design file, issue tracker, or implementation ticket. A sentence such as "open the edit user side sheet from the table toolbar" is much clearer than "open that panel from the thing above the grid". The embedded demos are intentionally compact. Production components still need state management, validation, accessibility testing, responsive behavior, and keyboard interaction.

The source tables behind this guide are available as component-index.csv and source-links.csv. The embedded demos are generated from the component index, and every component also has a standalone file in the examples directory.

Navigation and app structure

1. App shell

Also called: application frame, workspace shell

What it is: The persistent frame around a product: header, navigation, content area, and optional utilities.

Use it when: Use it for SaaS products, dashboards, internal tools, admin panels, and any screen family that needs a consistent frame.

2. Page header

Also called: screen header, content header

What it is: The top section of a page that contains the title, summary, primary action, and sometimes tabs or breadcrumbs.

Use it when: Use it when a page needs orientation and clear action hierarchy before the main content starts.

3. Top navigation bar

Also called: navbar, global nav, site nav

What it is: A horizontal navigation region, usually at the top of a website or app.

Use it when: Use it for marketing sites, docs, simple apps, and product areas with a small set of primary destinations.

4. App bar

Also called: top app bar, mobile header

What it is: A mobile or app-style bar that carries the current screen title, navigation affordance, and common actions.

Use it when: Use it when a screen needs a stable title/action zone, especially on mobile or dense product interfaces.

5. Toolbar

Also called: action toolbar, formatting toolbar

What it is: A compact row or group of actions related to the current context.

Use it when: Use it above tables, editors, canvases, lists, and selected objects.

6. Sidebar

Also called: side navigation, left nav

What it is: A persistent vertical navigation area beside the main content.

Use it when: Use it when the product has many destinations or nested sections that need to remain visible.

7. Navigation rail

Also called: rail, compact sidebar

What it is: A narrow vertical navigation bar with icons and optional labels.

Use it when: Use it when you need persistent navigation but want to save horizontal space.

8. Navigation drawer

Also called: drawer nav, slide-out nav

What it is: A temporary or persistent side panel containing navigation links.

Use it when: Use it for mobile apps, responsive layouts, or secondary navigation that does not always need to be visible.

9. Offcanvas panel

Also called: offcanvas, hidden side panel

What it is: A panel that slides in from an edge and temporarily covers or pushes content.

Use it when: Use it for responsive nav, filters, details, or utilities that should stay outside the normal layout.

10. Bottom navigation

Also called: bottom nav, mobile primary nav

What it is: A bottom-aligned navigation bar for a small set of top-level mobile destinations.

Use it when: Use it in mobile apps when three to five primary sections need constant access.

11. Tab bar

Also called: mobile tabs, section tabs

What it is: A set of equal-priority destinations shown as tabs, often at the bottom or top of an app.

Use it when: Use it to switch between peer sections without implying a multi-step flow.

12. Tabs

Also called: tab set, tab panel

What it is: A control that switches between related content panels within the same page context.

Use it when: Use it when content belongs to parallel categories and should not require separate pages.

13. Breadcrumbs

Also called: breadcrumb trail, path nav

What it is: A compact path showing where the user is in a hierarchy.

Use it when: Use it for deep information architectures, docs, catalogs, and admin pages.

14. Pagination

Also called: pager, page navigation

What it is: Controls for moving through paged result sets.

Use it when: Use it when the data set is large and page boundaries are meaningful or useful for URLs.

15. Stepper

Also called: progress steps, step indicator

What it is: A visual indicator of position in a multi-step process.

Use it when: Use it for checkout, onboarding, setup, and long forms broken into predictable stages.

16. Wizard

Also called: multi-step flow, guided flow

What it is: A structured sequence that guides users through decisions or data entry.

Use it when: Use it when tasks are complex enough to benefit from one focused step at a time.

17. Mega menu

Also called: large dropdown nav, flyout nav

What it is: A large navigation menu that exposes many destinations or groups at once.

Use it when: Use it for content-rich sites, ecommerce categories, and large documentation structures.

18. Menu bar

Also called: application menu, horizontal menu

What it is: A horizontal set of menus, often used for application commands.

Use it when: Use it in web apps that imitate desktop software patterns or expose many command groups.

19. Dropdown menu

Also called: select menu, overflow menu

What it is: A compact menu that opens from a trigger and lists actions or destinations.

Use it when: Use it for secondary actions, account menus, sorting choices, and compact command groups.

20. Context menu

Also called: right-click menu, contextual actions

What it is: A menu opened from an item or area that exposes actions relevant to that context.

Use it when: Use it for files, tables, canvases, editors, and objects with many possible operations.

21. Command palette

Also called: command menu, quick switcher

What it is: A searchable overlay for commands, navigation, and recent items.

Use it when: Use it in power-user products where keyboard-driven discovery and action speed matter.

22. Search bar

Also called: search field, site search

What it is: A prominent input dedicated to finding content or records.

Use it when: Use it when search is a primary path to information or navigation.

23. Filter bar

Also called: facets, filter controls

What it is: A row or panel of controls used to narrow a result set.

Use it when: Use it for tables, product grids, search results, dashboards, and reporting views.

24. Sort control

Also called: sort menu, ordering control

What it is: A control for changing the order of a list or table.

Use it when: Use it when users need to compare items by relevance, date, price, status, or priority.

25. View switcher

Also called: layout toggle, display mode selector

What it is: A control for switching between representations such as grid, list, map, or calendar.

Use it when: Use it when the same data can be consumed in more than one useful layout.

Layout and content containers

26. Container

Also called: page container, max-width wrapper

What it is: A structural wrapper that constrains width and controls page spacing.

Use it when: Use it to keep layouts readable and aligned across breakpoints.

27. Card

Also called: content card, tile

What it is: A bounded container that groups related information and actions.

Use it when: Use it for summaries, dashboards, product items, settings sections, and repeatable content blocks.

28. Panel

Also called: pane, content panel

What it is: A framed or separated area that holds related controls or content.

Use it when: Use it inside dashboards, settings screens, inspectors, and master-detail interfaces.

29. Section

Also called: content section, block

What it is: A named portion of a page that groups related content.

Use it when: Use it to make long pages scannable and to communicate structure in mockups.

30. Grid layout

Also called: CSS grid, card grid

What it is: A two-dimensional layout that arranges content in rows and columns.

Use it when: Use it for dashboards, galleries, product grids, and overview pages.

31. Stack layout

Also called: vertical stack, horizontal stack

What it is: A one-dimensional layout that spaces items in a row or column.

Use it when: Use it for forms, lists, action groups, and responsive component composition.

32. Split view

Also called: two-pane layout, dual pane

What it is: A layout with two adjacent panes, often list on one side and detail on the other.

Use it when: Use it when users compare or inspect one item while keeping a collection visible.

33. Splitter

Also called: resizable divider, pane handle

What it is: A draggable divider that changes the size of adjacent panes.

Use it when: Use it when users need control over workspace proportions.

34. Master-detail layout

Also called: list-detail, collection-detail

What it is: A structure where selecting an item in a master list updates a detail pane.

Use it when: Use it for inboxes, settings, CRM records, file browsers, and admin tools.

35. Accordion

Also called: collapsible list, expandable panels

What it is: A set of stacked headers that expand and collapse their associated content.

Use it when: Use it to compress related sections while keeping headings visible.

36. Disclosure

Also called: show more, details toggle

What it is: A single expandable control that reveals or hides additional content.

Use it when: Use it for optional details, advanced settings, and progressive disclosure.

37. Divider

Also called: separator, rule

What it is: A visual line or space that separates groups of content.

Use it when: Use it to clarify hierarchy without adding new containers.

38. Scroll area

Also called: custom scroll container, overflow area

What it is: A bounded region where content scrolls independently from the page.

Use it when: Use it for panels, sidebars, logs, menus, and long lists inside fixed layouts.

39. Carousel

Also called: slider, content carousel

What it is: A horizontally paged set of slides or cards.

Use it when: Use it sparingly for galleries, featured content, or small sets of comparable items.

40. Sticky header

Also called: pinned header, sticky table header

What it is: A header that remains visible while content scrolls underneath it.

Use it when: Use it for long tables, lists, dashboards, and pages where context must stay visible.

41. Hero section

Also called: hero, masthead

What it is: A prominent opening section that states the page value proposition and primary action.

Use it when: Use it for landing pages, product pages, and editorial entrances.

42. Feature section

Also called: feature block, marketing block

What it is: A layout section that explains a capability with text, media, and supporting points.

Use it when: Use it on marketing pages, product tours, and docs introductions.

43. Dashboard widget

Also called: dashboard card, metric tile

What it is: A self-contained block inside a dashboard, often showing a metric, chart, or alert.

Use it when: Use it when different information modules need to be rearranged or scanned quickly.

44. Aspect ratio box

Also called: media frame, ratio wrapper

What it is: A container that preserves a fixed width-to-height ratio.

Use it when: Use it for images, video, embeds, thumbnails, and responsive media.

45. Masonry grid

Also called: waterfall grid, Pinterest layout

What it is: A layout where cards of different heights flow into columns.

Use it when: Use it for visual collections where items have variable heights and strict row alignment is not required.

Overlays and transient surfaces

46. Modal dialog

Also called: modal, dialog

What it is: A focused overlay that blocks interaction with the page until dismissed or completed.

Use it when: Use it for short tasks, confirmations, forms, or interruptions that require attention.

47. Alert dialog

Also called: confirmation dialog, destructive dialog

What it is: A modal dialog for urgent decisions or irreversible actions.

Use it when: Use it for delete confirmations, unsaved changes, and serious warnings.

48. Sheet

Also called: side sheet, sliding panel

What it is: A panel that slides from an edge while keeping the current context visible.

Use it when: Use it for secondary tasks, details, filters, and editing flows that should not navigate away.

49. Bottom sheet

Also called: mobile sheet, action sheet surface

What it is: A sheet anchored to the bottom of the screen, common on mobile.

Use it when: Use it for contextual actions, mobile filters, pickers, and lightweight workflows.

50. Side sheet

Also called: right panel, inspector sheet

What it is: A sheet anchored to the left or right edge.

Use it when: Use it for details, inspectors, comments, settings, and contextual editing.

51. Popover

Also called: floating panel, popover card

What it is: A small floating surface anchored to a trigger.

Use it when: Use it for lightweight forms, extra details, small menus, and contextual controls.

52. Hover card

Also called: preview card, hover preview

What it is: A floating preview that appears when hovering or focusing an item.

Use it when: Use it for profile previews, link previews, glossary terms, and quick metadata.

53. Tooltip

Also called: hint, help tip

What it is: A small text hint shown near a focused or hovered control.

Use it when: Use it to clarify icons or short labels, not to hide essential instructions.

54. Toast

Also called: toast notification, transient message

What it is: A brief non-blocking message, often shown in a corner.

Use it when: Use it to confirm background actions such as saved, copied, uploaded, or synced.

55. Snackbar

Also called: inline transient bar, action toast

What it is: A transient message bar that may include one short action.

Use it when: Use it for undo, retry, or acknowledgment after an operation.

56. Notification banner

Also called: system banner, announcement bar

What it is: A prominent message spanning part or all of a page.

Use it when: Use it for maintenance notices, warnings, account states, or global announcements.

57. Action sheet

Also called: mobile action menu, sheet menu

What it is: A mobile overlay that presents contextual actions in a bottom sheet.

Use it when: Use it when several item-specific actions need to be easy to tap.

58. Lightbox

Also called: image viewer, media overlay

What it is: A full-screen or modal media viewer with surrounding content dimmed.

Use it when: Use it for image galleries, document previews, and media inspection.

59. Full-screen takeover

Also called: interstitial, full-screen flow

What it is: An overlay or route that temporarily replaces the entire app view.

Use it when: Use it for onboarding, checkout, critical setup, and immersive creation flows.

60. Coach mark

Also called: guided hint, product tour marker

What it is: A contextual instructional overlay pointing to an interface element.

Use it when: Use it for onboarding, new feature education, and guided tours.

Actions, feedback, and status

61. Button

Also called: action button, CTA

What it is: A control that performs an action when activated.

Use it when: Use it for commands, submissions, navigation calls to action, and explicit decisions.

62. Icon button

Also called: glyph button, icon-only action

What it is: A button represented primarily by an icon.

Use it when: Use it when space is constrained or the action is already visually familiar, and include an accessible label.

63. Button group

Also called: grouped buttons, action group

What it is: A set of related buttons visually grouped together.

Use it when: Use it for adjacent actions, formatting tools, or mutually related commands.

64. Split button

Also called: primary plus menu, compound button

What it is: A button with a main action and a secondary menu for variants.

Use it when: Use it when one action is most common but alternatives are needed nearby.

65. Floating action button

Also called: FAB, floating CTA

What it is: A prominent circular or raised action that floats above content.

Use it when: Use it for the primary creation action on mobile or focused app screens.

66. Speed dial

Also called: FAB menu, radial actions

What it is: A floating action button that expands into several related actions.

Use it when: Use it when a screen has multiple creation shortcuts that should stay compact.

67. Link

Also called: text link, anchor

What it is: Inline or standalone text that navigates to another place or resource.

Use it when: Use it for navigation, references, external resources, and secondary paths.

68. Close button

Also called: dismiss button, X button

What it is: A control for dismissing a panel, modal, toast, or removable item.

Use it when: Use it when a surface can be closed independently from the main flow.

69. Copy button

Also called: copy to clipboard, clipboard action

What it is: A control that copies text or a value to the clipboard.

Use it when: Use it near codes, URLs, tokens, commands, snippets, and shareable values.

70. Badge

Also called: label, count badge

What it is: A small marker for counts, status, or categorization.

Use it when: Use it for unread counts, labels, state tags, and compact metadata.

71. Chip

Also called: pill, tag, token

What it is: A compact rounded item representing a filter, tag, selection, or entity.

Use it when: Use it for selected filters, tags, recipients, labels, and removable tokens.

72. Avatar

Also called: profile image, user icon

What it is: A visual representation of a person, team, or entity.

Use it when: Use it in user menus, comments, tables, chats, and collaboration surfaces.

73. Avatar group

Also called: stacked avatars, face pile

What it is: A compact cluster of avatars representing several people.

Use it when: Use it to show collaborators, assignees, viewers, or participants.

74. Status indicator

Also called: presence dot, state marker

What it is: A small visual marker communicating state such as online, offline, error, or active.

Use it when: Use it beside users, systems, rows, cards, and resources.

75. Progress bar

Also called: linear progress, completion bar

What it is: A horizontal indicator showing task progress.

Use it when: Use it for uploads, setup progress, quotas, and determinate loading.

76. Progress circle

Also called: radial progress, circular progress

What it is: A circular indicator showing progress or activity.

Use it when: Use it where space is compact or a radial progress convention is expected.

77. Meter

Also called: gauge, value meter

What it is: A display of a bounded value such as storage, strength, capacity, or score.

Use it when: Use it for levels that are not necessarily task progress.

78. Spinner

Also called: loading spinner, activity indicator

What it is: An indeterminate indicator that something is loading.

Use it when: Use it for short waits when the amount of progress is unknown.

79. Skeleton

Also called: loading skeleton, placeholder

What it is: A placeholder shape that approximates content while it loads.

Use it when: Use it when layout is known and perceived loading speed matters.

80. Alert

Also called: inline alert, message

What it is: A visible message communicating success, warning, error, or information.

Use it when: Use it close to the relevant context when the message should remain visible.

Forms, inputs, and pickers

81. Form

Also called: input form, data entry flow

What it is: A group of fields and actions used to submit or edit data.

Use it when: Use it whenever users provide structured information.

82. Field

Also called: form field, input field

What it is: A labeled input unit with helper text, validation, and optional description.

Use it when: Use it to make each data-entry requirement clear and accessible.

83. Fieldset

Also called: field group, form group

What it is: A semantic group of related form controls with a shared label.

Use it when: Use it for radio groups, checkbox groups, address blocks, and related settings.

84. Text input

Also called: text field, single-line input

What it is: A single-line control for entering free text.

Use it when: Use it for names, titles, emails, search terms, and short values.

85. Textarea

Also called: multiline input, text area

What it is: A multi-line text field for longer free-form input.

Use it when: Use it for comments, descriptions, notes, and messages.

86. Password input

Also called: password field, secret input

What it is: A text field for private values, often with show/hide control.

Use it when: Use it for passwords, tokens, and secrets.

87. Number input

Also called: numeric field, spinbutton

What it is: An input specialized for numeric values, sometimes with increment controls.

Use it when: Use it for quantities, limits, counts, prices, and numeric settings.

88. Select

Also called: select box, dropdown select

What it is: A control for choosing one option from a predefined list.

Use it when: Use it when the option set is known and not too large.

89. Combobox

Also called: combo box, searchable select

What it is: A text input combined with a selectable list of suggestions.

Use it when: Use it when users may type to filter options or enter related values.

90. Autocomplete

Also called: typeahead, suggestion input

What it is: An input that suggests completions as the user types.

Use it when: Use it for search, locations, entities, tags, commands, and large option sets.

91. Listbox

Also called: option list, selection list

What it is: A selectable list of options, often used inside custom selects and comboboxes.

Use it when: Use it when the list itself should remain visible or keyboard-selectable.

92. Checkbox

Also called: check box, tick box

What it is: A control for an independent true/false choice.

Use it when: Use it for optional settings and multiple independent selections.

93. Checkbox group

Also called: multi-select checklist, checkbox list

What it is: A group of checkboxes sharing a label.

Use it when: Use it when users can choose multiple options from a known set.

94. Radio group

Also called: radio buttons, option group

What it is: A group of mutually exclusive options.

Use it when: Use it when exactly one choice should be made and all options should be visible.

95. Switch

Also called: toggle switch, on/off control

What it is: A binary control that changes a setting immediately or after save.

Use it when: Use it for enabled/disabled settings, especially where the state is more important than the action.

96. Segmented control

Also called: segmented button, choice chips

What it is: A compact group of mutually exclusive options shown as connected segments.

Use it when: Use it for short option sets such as day/week/month or list/grid.

97. Toggle group

Also called: toggle buttons, formatting toggles

What it is: A group of pressable options that can be single- or multi-select.

Use it when: Use it for formatting, tool modes, filters, and compact preference controls.

98. Slider

Also called: range input, value slider

What it is: A control for selecting a value along a continuous or stepped range.

Use it when: Use it for approximate values such as volume, price, zoom, or intensity.

99. Range slider

Also called: dual-thumb slider, interval slider

What it is: A slider with two handles used to select a minimum and maximum.

Use it when: Use it for ranges such as price, date, rating, and size.

100. Date picker

Also called: date input, calendar picker

What it is: A control for selecting a date.

Use it when: Use it when date format errors would be common or calendar context is helpful.

101. Time picker

Also called: time input, clock picker

What it is: A control for selecting a time.

Use it when: Use it for scheduling, reminders, bookings, and time ranges.

102. Date range picker

Also called: range calendar, start-end picker

What it is: A control for selecting start and end dates.

Use it when: Use it for reports, bookings, analytics, rentals, and event filtering.

103. Calendar

Also called: month calendar, calendar grid

What it is: A grid representation of days, often interactive.

Use it when: Use it for scheduling, availability, date selection, and planning views.

104. Color picker

Also called: color input, swatch picker

What it is: A control for selecting a color value.

Use it when: Use it in design tools, personalization settings, labels, charts, and theme editors.

105. File upload

Also called: file input, attachment picker

What it is: A control for selecting files from the device.

Use it when: Use it for documents, images, imports, avatars, and attachments.

106. Drop zone

Also called: drag-and-drop upload, upload area

What it is: A target area where users can drag files to upload.

Use it when: Use it when batch upload or visual file selection improves the flow.

107. Rich text editor

Also called: WYSIWYG editor, formatted editor

What it is: An editor for formatted text with controls like bold, headings, links, and lists.

Use it when: Use it for content creation where formatting is part of the output.

108. Markdown editor

## Release notes
 
- Added 170 demos
- Fixed dropdown semantics
 
[Read guide](/blog)

Also called: plain-text editor, markdown composer

What it is: An editor for Markdown content, often with preview.

Use it when: Use it for technical docs, notes, issue descriptions, and developer-oriented writing.

109. Code editor

1
2
3
4
5
6type Props = { name: string }
 
export function ComponentName({ name }: Props) {
  return <h2>{name}</h2>
}

Also called: source editor, code input

What it is: An editor specialized for code, often with line numbers or syntax support.

Use it when: Use it for scripts, config, snippets, queries, and developer tools.

110. OTP input

Also called: one-time code input, verification code

What it is: A group of short inputs for entering a multi-digit verification code.

Use it when: Use it for two-factor authentication, email verification, and phone verification.

Data display and information architecture

111. List

Also called: item list, collection list

What it is: A vertical collection of related items.

Use it when: Use it for messages, settings, files, tasks, search results, and navigation choices.

112. Table

Also called: data table, tabular view

What it is: A grid of rows and columns for structured data.

Use it when: Use it when users need to scan, compare, sort, or operate on records.

113. Data grid

Also called: interactive table, grid widget

What it is: A table-like component with richer interactions such as selection, resizing, editing, or virtualization.

Use it when: Use it for complex enterprise data, admin tools, and spreadsheet-like workflows.

114. Tree view

Also called: hierarchy tree, file tree

What it is: A nested list that can expand and collapse branches.

Use it when: Use it for folders, taxonomies, nested settings, and hierarchies.

115. Tree grid

Also called: hierarchical table, nested grid

What it is: A data grid where rows can contain expandable child rows.

Use it when: Use it for hierarchical records that also need columns.

116. Timeline

Also called: event timeline, activity timeline

What it is: A chronological display of events or milestones.

Use it when: Use it for histories, progress, audit trails, changelogs, and project events.

117. Feed

Also called: activity feed, stream

What it is: A chronological stream of content items.

Use it when: Use it for social updates, product activity, notifications, logs, and news.

118. Description list

Also called: definition list, metadata list

What it is: A list of terms and values used to display object metadata.

Use it when: Use it for profile details, resource properties, invoice metadata, and settings summaries.

119. Key-value table

Also called: properties table, details table

What it is: A compact table of labels and values.

Use it when: Use it when object details must be scannable and aligned.

120. KPI stat

Also called: metric card, stat block

What it is: A compact display of an important number and its trend or context.

Use it when: Use it for dashboards, reports, analytics, and business health summaries.

121. Chart

Also called: graph, visualization

What it is: A visual representation of quantitative data.

Use it when: Use it when trends, comparisons, or distributions matter more than exact row data.

122. Sparkline

Also called: mini chart, inline trend

What it is: A very small chart used inside cards, tables, or lists.

Use it when: Use it to show direction or trend without a full chart area.

123. Heatmap

Also called: matrix heatmap, density map

What it is: A grid where color intensity represents magnitude.

Use it when: Use it for calendars, correlation matrices, usage patterns, and geographic density.

124. Map

Also called: location map, geospatial view

What it is: A spatial view for locations, routes, or areas.

Use it when: Use it when geographic context is necessary for decision-making.

125. Kanban board

Also called: board, task board

What it is: A column-based workflow board where cards move through states.

Use it when: Use it for pipelines, task management, content workflows, and support queues.

126. Calendar view

Also called: schedule view, event calendar

What it is: A time-based layout showing events by day, week, or month.

Use it when: Use it for scheduling, planning, availability, and editorial calendars.

127. Gantt chart

Also called: project timeline, roadmap chart

What it is: A timeline view showing tasks, durations, and dependencies.

Use it when: Use it for project planning, roadmaps, capacity, and implementation sequencing.

128. Gallery

Also called: image grid, media gallery

What it is: A visual collection of images or media items.

Use it when: Use it for portfolios, product photos, uploads, and asset libraries.

129. Media player

Also called: video player, audio player

What it is: A component for playing media with controls.

Use it when: Use it for video, audio, previews, lessons, and product demos.

130. Code block

const componentName = 'Data table'
render(componentName)

Also called: code snippet, preformatted code

What it is: A formatted display of code or commands.

Use it when: Use it in documentation, developer tools, onboarding, and technical articles.

131. QR code

Also called: scan code, matrix code

What it is: A scannable code that encodes a URL or value.

Use it when: Use it for tickets, onboarding, payments, device pairing, and offline-to-online flows.

132. Log viewer

Also called: console output, event log

What it is: A scrollable, often monospace, stream of log entries.

Use it when: Use it for developer tools, imports, jobs, monitoring, and debugging.

133. Data table toolbar

Also called: table actions bar, bulk actions

What it is: A toolbar attached to a table for search, filters, export, and bulk actions.

Use it when: Use it when a table needs operations beyond row scanning.

134. File attachment list

Also called: attachments, file list

What it is: A list of uploaded or linked files with actions and metadata.

Use it when: Use it for messages, tickets, forms, records, and collaboration.

135. Inbox list

Also called: message list, mailbox

What it is: A list optimized for messages or notifications with sender, subject, preview, and state.

Use it when: Use it for email-like workflows, support queues, approvals, and notifications.

Commerce, mobile, collaboration, and AI patterns

136. Product card

Also called: commerce card, listing card

What it is: A card summarizing a product with image, title, price, rating, and actions.

Use it when: Use it for product grids, recommendations, marketplaces, and catalogs.

137. Product grid

Also called: listing grid, catalog grid

What it is: A grid of product cards.

Use it when: Use it for ecommerce category pages, marketplaces, app stores, and browsable inventories.

138. Product gallery

Also called: image gallery, product media

What it is: A set of product images with thumbnails or carousel controls.

Use it when: Use it on detail pages where visual inspection affects purchase decisions.

139. Cart drawer

Also called: shopping cart panel, mini cart

What it is: A side or bottom panel showing cart contents without leaving the page.

Use it when: Use it when users need quick cart review while continuing to shop.

140. Checkout form

Also called: payment form, checkout flow

What it is: A form sequence for contact, shipping, billing, payment, and review.

Use it when: Use it for purchases, subscriptions, donations, and paid bookings.

141. Order summary

Also called: purchase summary, cart summary

What it is: A compact summary of items, totals, taxes, shipping, and discounts.

Use it when: Use it beside checkout forms or before final confirmation.

142. Price block

Also called: pricing card, price display

What it is: A display for price, billing period, discount, and plan details.

Use it when: Use it for pricing pages, product detail pages, and subscription comparisons.

143. Coupon field

Also called: promo code field, discount input

What it is: An input for applying a coupon or promo code.

Use it when: Use it in cart, checkout, and subscription flows.

144. Quantity stepper

Also called: quantity selector, counter

What it is: A numeric control with minus and plus buttons.

Use it when: Use it for cart quantities, ticket counts, inventory, and simple numeric adjustments.

145. Wishlist button

Also called: save button, favorite button

What it is: A control that saves an item for later.

Use it when: Use it for product listings, marketplaces, media collections, and recommendations.

146. Comparison table

Also called: plan comparison, feature matrix

What it is: A table comparing items or plans across features.

Use it when: Use it for pricing, product choices, vendor selection, and complex buying decisions.

147. Product quick view

Also called: quick look, product preview

What it is: A modal or panel preview of product details from a listing.

Use it when: Use it when users need more information without losing browsing context.

148. Status bar

Also called: mobile status bar, system status

What it is: The top system area showing time, battery, network, and other device status.

Use it when: Use it in mobile mockups to make screen context realistic.

149. System navigation bar

Also called: mobile system nav, device nav

What it is: The bottom or side system navigation controls of a mobile device.

Use it when: Use it in mobile mockups when device chrome affects available space.

150. Bottom app bar

Also called: mobile action bar, bottom toolbar

What it is: A bottom-aligned app bar that holds actions and sometimes navigation.

Use it when: Use it when important actions should remain thumb-accessible on mobile.

151. Page control dots

Also called: pagination dots, carousel dots

What it is: Dots indicating position in a paged sequence.

Use it when: Use it for onboarding screens, carousels, media galleries, and mobile paged views.

152. Swipe action row

Also called: swipe row, reveal actions

What it is: A list row that reveals actions when swiped horizontally.

Use it when: Use it for mobile lists where common actions should be quick but not always visible.

153. Pull to refresh

Also called: refresh gesture, pull refresh

What it is: A mobile gesture and indicator for reloading content by pulling down.

Use it when: Use it for feeds, inboxes, lists, and dashboards where refresh is common.

154. Infinite scroll

Also called: endless list, continuous loading

What it is: A list that loads more content as the user approaches the end.

Use it when: Use it for feeds and large browsable collections where exact position is less important than flow.

155. Virtualized list

Also called: windowed list, virtual scroller

What it is: A list that renders only visible items for performance.

Use it when: Use it for very large collections that would be slow to render all at once.

156. Drag-and-drop list

Also called: sortable list, reorderable list

What it is: A list where items can be moved by dragging.

Use it when: Use it for priorities, playlists, Kanban cards, builders, and manual ordering.

157. Keyboard accessory bar

Also called: input accessory view, mobile keyboard toolbar

What it is: A bar above the mobile keyboard with shortcuts or context actions.

Use it when: Use it for editors, chat, rich input, and forms that need extra controls.

158. Safe area inset

Also called: notch padding, device safe area

What it is: Spacing reserved for notches, rounded corners, and system bars.

Use it when: Use it in mobile mockups to avoid placing controls under device chrome.

159. Comment thread

Also called: discussion thread, comments

What it is: A nested or chronological set of comments around a resource.

Use it when: Use it for documents, issues, tasks, designs, and collaborative records.

160. Mention autocomplete

Also called: mention picker, at-mention menu

What it is: A typeahead menu for inserting people, teams, or entities after a trigger such as @.

Use it when: Use it in comments, chat, editors, and collaboration tools.

161. Reaction bar

Also called: emoji reactions, reaction picker

What it is: A compact set of reactions attached to content.

Use it when: Use it for lightweight feedback in chat, comments, feeds, and collaboration.

162. Presence indicator

Also called: collaborator presence, online presence

What it is: A signal showing who is online, viewing, editing, or available.

Use it when: Use it in collaborative editors, chat, dashboards, and shared workspaces.

163. Activity feed

Also called: audit feed, updates feed

What it is: A stream of actions performed by people or systems.

Use it when: Use it for records, projects, collaboration, admin history, and notifications.

164. Changelog

Also called: release notes, updates list

What it is: A chronological record of product or system changes.

Use it when: Use it for release notes, documentation, admin updates, and internal tooling.

165. Chat message bubble

Also called: message bubble, chat item

What it is: A single chat message container, often aligned by sender.

Use it when: Use it for chat apps, support widgets, AI assistants, and messaging interfaces.

166. Chat composer

Also called: message composer, input composer

What it is: The input area used to write and send messages.

Use it when: Use it for chat, comments, support, and AI interfaces.

167. Prompt box

Also called: AI prompt input, instruction box

What it is: A composer optimized for sending prompts or instructions to an AI system.

Use it when: Use it for AI assistants, generation tools, search agents, and automation UIs.

168. Assistant response card

Also called: AI response block, answer card

What it is: A structured card showing an AI-generated response, actions, and metadata.

Use it when: Use it when generated content needs feedback, citation, copy, or regeneration controls.

169. Citation list

Also called: source list, references

What it is: A list of sources or evidence attached to a claim or generated answer.

Use it when: Use it in research, AI answers, legal review, scientific writing, and documentation.

170. Editable text

Also called: inline edit, editable field

What it is: Text that turns into an input when activated.

Use it when: Use it for titles, labels, table cells, and settings where inline editing is faster than a form.