--- title: Web components description: >- Web components are the UI building blocks that you use to display data and trigger API functions. These components are native UI elements that follow Shopify's design system and render optimized interfaces for retail workflows in the POS app on iOS and Android devices (POS version 10.19 and later). api_version: 2026-01 api_name: pos-ui-extensions source_url: html: 'https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components' md: 'https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components.md' --- # Web components Web components are the UI building blocks that you use to display data and trigger API functions. These components are native UI elements that follow [Shopify's design system](https://shopify.dev/docs/apps/design) and render optimized interfaces for retail workflows in [the POS app](https://apps.shopify.com/shopify-pos) on iOS and Android devices (POS version 10.19 and later). Your [target](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/targets) determines which components you can use because different locations in POS have different interface requirements and constraints. ## Actions Actions trigger retail operations through quick, touch-based interactions like applying discounts, confirming payments, and initiating workflows. [![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/button-thumbnail-Jng7BLxf.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/button-thumbnail-Jng7BLxf.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/button) [Button](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/button) [Execute actions through tappable button elements with customizable titles and styles.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/button) [![Clickable](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/clickable-thumbnail-DFroxC2E.png)![Clickable](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/clickable-thumbnail-DFroxC2E.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/clickable) [Clickable](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/clickable) [Make any content tappable and trigger actions when pressed.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/clickable) [![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/link-thumbnail-kMFbw5Hw.png)![Link](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/link-thumbnail-kMFbw5Hw.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/link) [Link](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/link) [Make text interactive for lightweight actions, navigation triggers, or actions embedded within text content.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/link) [![Tile](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/tile-thumbnail-BeEIvIUr.png)![Tile](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/tile-thumbnail-BeEIvIUr.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/tile) [Tile](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/tile) [Display interactive buttons for the POS smart grid that allow merchants to complete actions quickly.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/actions/tile) ## Feedback and status indicators Feedback and status indicators keep staff informed about transaction status, errors, and confirmations during retail operations. [![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/badge-thumbnail-QXbrPKEk.png)![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/badge-thumbnail-QXbrPKEk.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/badge) [Badge](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/badge) [Use color and text to communicate the state of orders, products, customers, and other business data.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/badge) [![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/banner-thumbnail-uQujQLKj.png)![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/banner-thumbnail-uQujQLKj.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/banner) [Banner](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/banner) [Highlight important information or required actions prominently within the POS interface.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/banner) [![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/modal-thumbnail-DcvNskAZ.png)![Modal](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/modal-thumbnail-DcvNskAZ.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/modal) [Modal](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/modal) [Display content in an overlay that requires merchant attention before proceeding.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/modal) [![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/spinner-thumbnail-D5R9doKW.png)![Spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/spinner-thumbnail-D5R9doKW.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/spinner) [Spinner](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/spinner) [Indicate ongoing processes or loading states with visual feedback.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/feedback-and-status-indicators/spinner) ## Forms Forms capture data during transactions with built-in validation and formatting optimized for mobile touch interfaces. [![Choice list](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/choicelist-thumbnail-B-7-SDX3.png)![Choice list](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/choicelist-thumbnail-B-7-SDX3.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/choice-list) [Choice list](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/choice-list) [Present multiple options for single or multiple selections.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/choice-list) [![Date field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-field-thumbnail-BeOrNvnN.png)![Date field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-field-thumbnail-BeOrNvnN.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-field) [Date field](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-field) [Capture date input with a consistent interface for date selection and proper validation.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-field) [![Date picker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-picker-thumbnail-Df5hnRCN.png)![Date picker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-picker-thumbnail-Df5hnRCN.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-picker) [Date picker](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-picker) [Allow merchants to select a specific date using a calendar-like picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-picker) [![Date spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-spinner-thumbnail-D_4rUv8K.png)![Date spinner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-spinner-thumbnail-D_4rUv8K.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-spinner) [Date spinner](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-spinner) [Enable merchants to select a specific date using a spinner interface with scrollable columns for month, day, and year.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/date-spinner) [![Email field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/email-field-thumbnail-C9D_v2QA.png)![Email field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/email-field-thumbnail-C9D_v2QA.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/email-field) [Email field](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/email-field) [Capture email address input from customers with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/email-field) [![Number field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/number-field-thumbnail-B1T9x-xs.png)![Number field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/number-field-thumbnail-B1T9x-xs.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/number-field) [Number field](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/number-field) [Capture numeric input with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/number-field) [![Search field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/search-field-thumbnail-DKt5Uftl.png)![Search field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/search-field-thumbnail-DKt5Uftl.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/search-field) [Search field](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/search-field) [Capture search terms using a single-line input field.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/search-field) [![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/switch-thumbnail-a0H3GKge.png)![Switch](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/switch-thumbnail-a0H3GKge.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/switch) [Switch](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/switch) [Toggle an option on or off for settings that take effect immediately.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/switch) [![Text area](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-area-thumbnail-Ds3IAIkq.png)![Text area](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-area-thumbnail-Ds3IAIkq.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/text-area) [Text area](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/text-area) [Capture longer text content with a multi-line, resizable text input area.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/text-area) [![Text field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-field-thumbnail-OpzYhMZ5.png)![Text field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-field-thumbnail-OpzYhMZ5.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/text-field) [Text field](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/text-field) [Capture single-line text input.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/text-field) [![Time field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/time-field-thumbnail-DMEL2zqD.png)![Time field](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/time-field-thumbnail-DMEL2zqD.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/time-field) [Time field](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/time-field) [Capture time input with a consistent interface for time selection and validation.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/time-field) [![Time picker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/time-spinner-thumbnail-Cs2dHSve.png)![Time picker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/time-spinner-thumbnail-Cs2dHSve.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/time-picker) [Time picker](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/time-picker) [Allow merchants to select a specific time using an interactive picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/forms/time-picker) ## Layout and structure Layout and structure components create consistent visual hierarchy and spacing, presenting content clearly across different device sizes. [![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/box-thumbnail-BOPMWGII.png)![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/box-thumbnail-BOPMWGII.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/box) [Box](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/box) [Display a generic container with consistent spacing and styling.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/box) [![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/divider-thumbnail-BQslD_wx.png)![Divider](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/divider-thumbnail-BQslD_wx.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/divider) [Divider](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/divider) [Create visual separation between content sections.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/divider) [![Empty state](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/emptystate-thumbnail-DZwcnKze.png)![Empty state](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/emptystate-thumbnail-DZwcnKze.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/empty-state) [Empty state](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/empty-state) [Display a placeholder view when there's no content to show, guiding users on what to do next.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/empty-state) [![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/heading-thumbnail-BSzfWqtO.png)![Heading](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/heading-thumbnail-BSzfWqtO.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/heading) [Heading](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/heading) [Render hierarchical titles to communicate the structure and organization of page content.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/heading) [![Page](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/page-thumbnail-LF5T5NeY.png)![Page](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/page-thumbnail-LF5T5NeY.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/page) [Page](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/page) [Define full-screen views within modals with navigation titles and back button support.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/page) [![POS block](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/pos-block-thumbnail-N8RjWvpm.png)![POS block](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/pos-block-thumbnail-N8RjWvpm.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/pos-block) [POS block](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/pos-block) [Create a container to place content with an action button.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/pos-block) [![Scroll box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/scrollbox-thumbnail-BI7AErmN.png)![Scroll box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/scrollbox-thumbnail-BI7AErmN.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/scroll-box) [Scroll box](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/scroll-box) [Create a scrollable area for content that exceeds container bounds.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/scroll-box) [![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/section-thumbnail-CvU3XDk2.png)![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/section-thumbnail-CvU3XDk2.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/section) [Section](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/section) [Group related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/section) [![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/stack-thumbnail-kNHnP8Rv.png)![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/stack-thumbnail-kNHnP8Rv.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/stack) [Stack](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/stack) [Organize elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/stack) [![Tabs](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/tab-thumbnail-DW7FlCbb.png)![Tabs](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/tab-thumbnail-DW7FlCbb.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/tabs) [Tabs](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/tabs) [Organize content into separate views that merchants can switch between without leaving the page.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/tabs) [![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-thumbnail-BhieEYRm.png)![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-thumbnail-BhieEYRm.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/text) [Text](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/text) [Display text with specific visual styles or tones.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/layout-and-structure/text) ## Media and visuals Media and visuals display product images, icons, and branding elements that help staff identify products and communicate information. [![Embed](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/embed-thumbnail-CC-IpLto.png)![Embed](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2026-01/embed-thumbnail-CC-IpLto.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/embed) [Embed](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/embed) [Display a preview of printable content from a specified source URL.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/embed) [![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/icon-thumbnail-DjsFlE1e.png)![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/icon-thumbnail-DjsFlE1e.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/icon) [Icon](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/icon) [Display standardized visual symbols from the POS catalog to represent actions, statuses, or categories consistently.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/icon) [![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/image-thumbnail-CL0yEi7W.png)![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/image-thumbnail-CL0yEi7W.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/image) [Image](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/image) [Add visual content to the POS interface and customize the presentation of visuals.](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components/media-and-visuals/image) ***