--- title: Polaris web components description: >- Polaris web components for building consistent and accessible user interfaces in POS UI extensions. api_version: 2026-01 api_name: pos-ui-extensions source_url: html: 'https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components' md: >- https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components.md --- # Polaris web components Polaris 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/polaris-web-components/actions/button) [Button](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/button) [Execute actions through tappable button elements with customizable titles and styles.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/actions/clickable) [Clickable](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/clickable) [Make any content tappable and trigger actions when pressed.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/clickable) [![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/polaris-web-components/actions/tile) [Tile](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/actions/tile) [![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/polaris-web-components/actions/link) [Link](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/link) [The link component makes text interactive, allowing users to trigger actions through tappable text.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/link) ## 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/polaris-web-components/feedback-and-status-indicators/badge) [Badge](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/feedback-and-status-indicators/banner) [Banner](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/feedback-and-status-indicators/modal) [Modal](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/feedback-and-status-indicators/spinner) [Spinner](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/spinner) [The spinner component indicates ongoing processes or loading states.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/forms/choice-list) [Choice list](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/choice-list) [Present multiple options for single or multiple selections.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/forms/date-field) [Date field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/forms/date-picker) [Date picker](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/forms/date-spinner) [Date spinner](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/forms/email-field) [Email field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/email-field) [Capture email address input from customers with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/forms/number-field) [Number field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/number-field) [Capture numeric input with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/forms/search-field) [Search field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/search-field) [Capture search terms using a single-line input field.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/search-field) [![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/polaris-web-components/forms/text-area) [Text area](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/forms/text-field) [Text field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/text-field) [Capture single-line text input.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/forms/time-field) [Time field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/forms/time-picker) [Time picker](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/forms/time-picker) [![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/polaris-web-components/forms/switch) [Switch](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/switch) [The switch component creates a toggle control that allows merchants to turn an option on or off.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/switch) ## 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/polaris-web-components/layout-and-structure/box) [Box](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/box) [Display a generic container with consistent spacing and styling.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/layout-and-structure/divider) [Divider](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/divider) [Create visual separation between content sections.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/divider) [![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/polaris-web-components/layout-and-structure/heading) [Heading](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/layout-and-structure/page) [Page](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/layout-and-structure/pos-block) [POS block](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/layout-and-structure/scroll-box) [Scroll box](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/layout-and-structure/section) [Section](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/section) [Group related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/layout-and-structure/stack) [Stack](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/layout-and-structure/stack) [![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/polaris-web-components/layout-and-structure/text) [Text](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/text) [Display text with specific visual styles or tones.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/text) [![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/polaris-web-components/layout-and-structure/empty-state) [Empty state](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/empty-state) [The empty state component displays a placeholder view when there is no content to show.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/empty-state) [![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/polaris-web-components/layout-and-structure/tabs) [Tabs](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/tabs) [The tabs component organizes content into separate views, allowing merchants to switch between related information without leaving the current page.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/tabs) ## Media and visuals Media and visuals display product images, icons, and branding elements that help staff identify products and communicate information. [![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/polaris-web-components/media-and-visuals/icon) [Icon](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-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/polaris-web-components/media-and-visuals/image) [Image](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-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/polaris-web-components/media-and-visuals/image) [![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/polaris-web-components/media-and-visuals/embed) [Embed](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/media-and-visuals/embed) [The embed component displays a preview of printable content from a specified source URL.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/media-and-visuals/embed) ***