--- title: UI components description: >- UI components are the building blocks that you use to display data and trigger API functions in POS UI extensions. These components follow Shopify's design system and render optimized interfaces for retail workflows in the POS app on iOS and Android devices. api_version: 2025-07 api_name: pos-ui-extensions source_url: html: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components' md: 'https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components.md' --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/pos/upgrading-to-2025-10) to upgrade your extension. # UI components These components are built with [remote-ui](https://github.com/Shopify/remote-ui). For the equivalents used in newer API versions, see [web components](https://shopify.dev/docs/api/pos-ui-extensions/latest/web-components). UI components are the building blocks that you use to display data and trigger API functions in POS UI extensions. These components 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. Your [target](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/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-07/button-thumbnail-DzQAg1N-.png)![Button](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/button-thumbnail-DzQAg1N-.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/button) [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/button) [Execute actions through tappable button elements with customizable titles and styles.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/button) [![Selectable](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/selectable-thumbnail-DE1bbHYO.png)![Selectable](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/selectable-thumbnail-DE1bbHYO.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/selectable) [Selectable](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/selectable) [Make non-interactive components tappable and trigger actions when pressed.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/selectable) [![Tile](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/tile-thumbnail-AfbkjeUt.png)![Tile](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/tile-thumbnail-AfbkjeUt.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/tile) [Tile](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-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/2025-07/ui-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-07/badge-thumbnail-Cvhe7lPg.png)![Badge](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/badge-thumbnail-Cvhe7lPg.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge) [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-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/2025-07/ui-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-07/banner-thumbnail-C-Fpnx7y.png)![Banner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/banner-thumbnail-C-Fpnx7y.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner) [Banner](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-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/2025-07/ui-components/feedback-and-status-indicators/banner) [![Dialog](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/dialog-thumbnail-fu4A3f_7.png)![Dialog](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/dialog-thumbnail-fu4A3f_7.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/dialog) [Dialog](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/dialog) [Display confirmation dialogs and alerts that require user response before proceeding.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/dialog) ## Forms Forms capture data during transactions with built-in validation and formatting optimized for mobile touch interfaces. [![DateField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/date-field-thumbnail-BBugGPbr.png)![DateField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/date-field-thumbnail-BBugGPbr.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datefield) [Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datefield) [Capture date input with a consistent interface for date selection and proper validation.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datefield) [![DatePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/date-picker-thumbnail-D4M_Q2zP.png)![DatePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/date-picker-thumbnail-D4M_Q2zP.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datepicker) [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datepicker) [Allow merchants to select a specific date using a calendar-like picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datepicker) [![EmailField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/email-field-thumbnail-DkcfXv8y.png)![EmailField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/email-field-thumbnail-DkcfXv8y.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/emailfield) [Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/emailfield) [Capture email address input from customers with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/emailfield) [![NumberField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/number-field-thumbnail-BjevPtw7.png)![NumberField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/number-field-thumbnail-BjevPtw7.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/numberfield) [Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/numberfield) [Capture numeric input with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/numberfield) [![PinPad](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/pin-pad-thumbnail-DmHiA44F.png)![PinPad](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/pin-pad-thumbnail-DmHiA44F.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/pinpad) [Pin​Pad](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/pinpad) [Provide a secure numeric keypad interface for PIN entry and validation.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/pinpad) [![RadioButtonList](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/radio-button-list-thumbnail-Cx4TjaL8.png)![RadioButtonList](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/radio-button-list-thumbnail-Cx4TjaL8.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/radiobuttonlist) [Radio​Button​List](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/radiobuttonlist) [Present radio button options for single selection from a list of string values.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/radiobuttonlist) [![Stepper](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/stepper-thumbnail-Dc4S7bjW.png)![Stepper](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/stepper-thumbnail-Dc4S7bjW.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/stepper) [Stepper](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/stepper) [Provide increment and decrement controls for numeric values with visual feedback.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/stepper) [![TextArea](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/text-area-thumbnail-BeSE7V8b.png)![TextArea](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/text-area-thumbnail-BeSE7V8b.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textarea) [Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textarea) [Capture longer text content with a multi-line, resizable text input area.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textarea) [![TextField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/text-field-thumbnail-DgvRuKZ5.png)![TextField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/text-field-thumbnail-DgvRuKZ5.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textfield) [Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textfield) [Capture single-line text input.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textfield) [![TimeField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/time-field-thumbnail-BvM4cQcy.png)![TimeField](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/time-field-thumbnail-BvM4cQcy.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timefield) [Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timefield) [Capture time input with a consistent interface for time selection and validation.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timefield) [![TimePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/time-picker-thumbnail-DFR8SKYr.png)![TimePicker](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/time-picker-thumbnail-DFR8SKYr.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timepicker) [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timepicker) [Allow merchants to select a specific time using an interactive picker interface.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timepicker) ## Layout and structure Layout and structure components create consistent visual hierarchy and spacing, presenting content clearly across different device sizes. **Beta:** POSReceiptBlock is part of the POS UI extensions [feature preview](https://shopify.dev/docs/api/feature-previews). This feature preview is invite-only and requires POS UI extensions version 2025-04 or higher and POS app version 9.31.0 or later. [![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/box-thumbnail-BNw3YXwm.png)![Box](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/box-thumbnail-BNw3YXwm.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/box) [Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/box) [Display a generic container with consistent spacing and styling.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/box) [![List](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/list-thumbnail-CjwnukVT.png)![List](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/list-thumbnail-CjwnukVT.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/list) [List](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/list) [Display structured data in rows with rich content including labels, subtitles, badges, images, and interactive elements.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/list) [![POSBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/pos-block-thumbnail-DLTOPzz5.png)![POSBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/pos-block-thumbnail-DLTOPzz5.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblock) [POS​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblock) [Create a container to place content with an action button.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblock) [![POSBlockRow](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/pos-block-row-thumbnail-FOo9Rlcx.png)![POSBlockRow](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/pos-block-row-thumbnail-FOo9Rlcx.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblockrow) [POS​Block​Row](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblockrow) [Render individual rows within a POSBlock container.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblockrow) [![POSReceiptBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/pos-receipt-block-thumbnail-DQWjfqzQ.png)![POSReceiptBlock](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/pos-receipt-block-thumbnail-DQWjfqzQ.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posreceiptblock) [POS​Receipt​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posreceiptblock) [Group components together for display on POS receipts.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posreceiptblock) [![Screen](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/screen-thumbnail-RCePukWU.png)![Screen](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/screen-thumbnail-RCePukWU.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/screen) [Screen](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/screen) [Define full-screen views within modals with navigation titles and back button support.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/screen) [![ScrollView](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/scroll-view-thumbnail-CJRyjLEk.png)![ScrollView](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/scroll-view-thumbnail-CJRyjLEk.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview) [Scroll​View](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview) [Create a scrollable container for content that exceeds the available display area.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview) [![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/section-thumbnail-CTz75ml5.png)![Section](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/section-thumbnail-CTz75ml5.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/section) [Section](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/section) [Group related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/section) [![SectionHeader](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/section-header-thumbnail-2YONr8hr.png)![SectionHeader](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/section-header-thumbnail-2YONr8hr.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/sectionheader) [Section​Header](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/sectionheader) [Display a title with an optional action button and divider line.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/sectionheader) [![Spacing](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/spacing-thumbnail-Cidthuo_.png)![Spacing](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/spacing-thumbnail-Cidthuo_.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/spacing) [Spacing](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/spacing) [Apply consistent spacing to maintain visual balance and touch-friendly layouts.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/spacing) [![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/stack-thumbnail-DNLgYSho.png)![Stack](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/stack-thumbnail-DNLgYSho.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/stack) [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/stack) [Organize elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/stack) [![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/text-thumbnail-CzmuEgvu.png)![Text](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/text-thumbnail-CzmuEgvu.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/text) [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/text) [Display text with specific visual styles or tones.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-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. **Beta:** QRCode is part of the POS UI extensions [feature preview](https://shopify.dev/docs/api/feature-previews). This feature preview is invite-only and requires POS UI extensions version 2025-04 or higher and POS app version 9.31.0 or later. [![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/icon-thumbnail-DdGG_Mzw.png)![Icon](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/icon-thumbnail-DdGG_Mzw.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/icon) [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-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/2025-07/ui-components/media-and-visuals/icon) [![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/image-thumbnail-BXLgapH0.png)![Image](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/image-thumbnail-BXLgapH0.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/image) [Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-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/2025-07/ui-components/media-and-visuals/image) [![QRCode](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/qrcode-thumbnail-j-0TyMLz.png)![QRCode](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/qrcode-thumbnail-j-0TyMLz.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode) [QR​Code](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode) [Render a QR code for receipts in Shopify POS.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode) ## Navigation and content Navigation and content components help staff find products, manage information, and navigate through retail data. [![CameraScanner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/camera-scanner-thumbnail-BR9lGWJy.png)![CameraScanner](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/camera-scanner-thumbnail-BR9lGWJy.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/camerascanner) [Camera​Scanner](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/camerascanner) [Provide camera-based scanning functionality with optional banner messaging.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/camerascanner) [![Navigator](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/navigator-thumbnail-BuF8o69U.png)![Navigator](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/navigator-thumbnail-BuF8o69U.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/navigator) [Navigator](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/navigator) [Manage navigation between multiple Screen components within a POS UI extension.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/navigator) [![PrintPreview](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/print-preview-thumbnail-CXpvmUF4.png)![PrintPreview](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/print-preview-thumbnail-CXpvmUF4.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/printpreview) [Print​Preview](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/printpreview) [Display a preview of printable content from a specified source URL.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/printpreview) [![SearchBar](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/search-bar-thumbnail-BiTASQIV.png)![SearchBar](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/search-bar-thumbnail-BiTASQIV.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/searchbar) [Search​Bar](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/searchbar) [Provide a text input field optimized for search with automatic search icon and change handling.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/searchbar) [![SegmentedControl](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/segmented-control-thumbnail-n2rU9I6p.png)![SegmentedControl](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-07/segmented-control-thumbnail-n2rU9I6p.png)](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/segmentedcontrol) [Segmented​Control](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/segmentedcontrol) [Display a horizontal row of segments that allow users to switch between different views or filter content.](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/segmentedcontrol) ***