---
title: Polaris web components
description: >-
  Polaris web components for building consistent and accessible user interfaces
  in POS UI extensions.
api_version: 2025-10
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.

Your [target](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/button-thumbnail.png)![Button](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/button-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/clickable-thumbnail.png)![Clickable](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/clickable-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/tile-thumbnail.png)![Tile](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/tile-thumbnail.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)

## Feedback and status indicators

Feedback and status indicators keep staff informed about transaction status, errors, and confirmations during retail operations.

[![Badge](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/badge-thumbnail.png)![Badge](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/badge-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/banner-thumbnail.png)![Banner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/banner-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/modal-thumbnail.png)![Modal](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/modal-thumbnail.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)

## Forms

Forms capture data during transactions with built-in validation and formatting optimized for mobile touch interfaces.

[![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/choicelist-thumbnail.png)![ChoiceList](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/choicelist-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/choicelist)

[Choice​List](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/choicelist)

[Present multiple options for single or multiple selections.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/choicelist)

[![DateField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-field-thumbnail.png)![DateField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/datefield)

[Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/datefield)

[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/datefield)

[![DatePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-picker-thumbnail.png)![DatePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-picker-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/datepicker)

[Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/datepicker)

[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/datepicker)

[![DateSpinner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-spinner-thumbnail.png)![DateSpinner](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/date-spinner-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/datespinner)

[Date​Spinner](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/datespinner)

[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/datespinner)

[![EmailField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/email-field-thumbnail.png)![EmailField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/email-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/emailfield)

[Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/emailfield)

[Capture email address input from customers with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/emailfield)

[![NumberField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/number-field-thumbnail.png)![NumberField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/number-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/numberfield)

[Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/numberfield)

[Capture numeric input with built-in validation.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/numberfield)

[![SearchField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/search-field-thumbnail.png)![SearchField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/search-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/searchfield)

[Search​Field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/searchfield)

[Capture search terms using a single-line input field.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/searchfield)

[![TextArea](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-area-thumbnail.png)![TextArea](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-area-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/textarea)

[Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/textarea)

[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/textarea)

[![TextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-field-thumbnail.png)![TextField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/textfield)

[Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/textfield)

[Capture single-line text input.](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/textfield)

[![TimeField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/time-field-thumbnail.png)![TimeField](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/time-field-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/timefield)

[Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/timefield)

[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/timefield)

[![TimePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/time-spinner-thumbnail.png)![TimePicker](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/time-spinner-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/timepicker)

[Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/forms/timepicker)

[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/timepicker)

## Layout and structure

Layout and structure components create consistent visual hierarchy and spacing, presenting content clearly across different device sizes.

[![Box](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/box-thumbnail.png)![Box](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/box-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/divider-thumbnail.png)![Divider](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/divider-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/heading-thumbnail.png)![Heading](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/heading-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/page-thumbnail.png)![Page](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/page-thumbnail.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)

[![PosBlock](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/pos-block-thumbnail.png)![PosBlock](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/pos-block-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/posblock)

[Pos​Block](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/posblock)

[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/posblock)

[![ScrollBox](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/scrollbox-thumbnail.png)![ScrollBox](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/scrollbox-thumbnail.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/scrollbox)

[Scroll​Box](https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/scrollbox)

[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/scrollbox)

[![Section](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/section-thumbnail.png)![Section](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/section-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/stack-thumbnail.png)![Stack](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/stack-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-thumbnail.png)![Text](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/text-thumbnail.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)

## Media and visuals

Media and visuals display product images, icons, and branding elements that help staff identify products and communicate information.

[![Icon](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/icon-thumbnail.png)![Icon](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/icon-thumbnail.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://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/image-thumbnail.png)![Image](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/image-thumbnail.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)

***