---
title: Web components
description: >-
  Polaris provides a library of web components for your app to display data, get
  input from merchants, and trigger API calls. These components follow Shopify's
  design system, ensuring that your app looks and feels native to the Shopify
  admin.
api_version: v2.0
source_url:
  html: 'https://shopify.dev/docs/api/app-home/v2.0-rc/web-components'
  md: 'https://shopify.dev/docs/api/app-home/v2.0-rc/web-components.md'
api_name: app-home
---

# Web components

Polaris provides a library of web components for your app to display data, get input from merchants, and trigger API calls. These components follow [Shopify's design system](https://shopify.dev/docs/api/polaris/using-polaris-web-components), ensuring that your app looks and feels native to the Shopify admin.

To choose which release of the library your app loads, see [Versioning for web components](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/versioning).

## Actions

Action components let users trigger events, perform tasks, and navigate through the interface.

[![Button](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/button-By83X2Ct.png)![Button](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/button-By83X2Ct.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/button)

[Button](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/button)

[Trigger actions or events, such as submitting forms, opening dialogs, or navigating to other pages.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/button)

[![Button group](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/buttongroup-DJ6XT5OZ.png)![Button group](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/buttongroup-DJ6XT5OZ.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/button-group)

[Button group](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/button-group)

[Display multiple buttons in a layout.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/button-group)

[![Clickable](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/clickable-BRd4RzA8.png)![Clickable](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/clickable-BRd4RzA8.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/clickable)

[Clickable](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/clickable)

[Create custom interactive elements not achievable with Button or Link.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/clickable)

[![Clickable chip](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/clickable-chip-BPxF31lU.png)![Clickable chip](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/clickable-chip-BPxF31lU.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/clickable-chip)

[Clickable chip](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/clickable-chip)

[Categorize or highlight content attributes with an interactive button.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/clickable-chip)

[![Link](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/link-Bgq-SinW.png)![Link](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/link-Bgq-SinW.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/link)

[Link](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/link)

[Make text interactive for navigating to other pages or performing actions.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/link)

[![Menu](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/menu-D1BRVL-N.png)![Menu](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/menu-D1BRVL-N.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/menu)

[Menu](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/menu)

[Display a list of actions that can be performed on a resource.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/actions/menu)

## Feedback and status indicators

Feedback and status indicators display information about the status of resources and actions.

[![Badge](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/badge-BTUA5Cv9.png)![Badge](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/badge-BTUA5Cv9.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/badge)

[Badge](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/badge)

[Inform users about the status of a resource or indicate that an action has been completed.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/badge)

[![Banner](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/banner-B7G4BclH.png)![Banner](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/banner-B7G4BclH.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/banner)

[Banner](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/banner)

[Highlight important information or required actions prominently within the interface.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/banner)

[![Empty state](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/emptystate-EqbEkGN7.png)![Empty state](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/emptystate-EqbEkGN7.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/empty-state)

[Empty state](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/empty-state)

[Explain why a page, list, or table has nothing to show and offer the next action.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/empty-state)

[![Progress](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/progress-ekspBbxO.png)![Progress](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/progress-ekspBbxO.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/progress)

[Progress](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/progress)

[Show how far a measurable task or goal has advanced, such as an upload, an import, or a shipping threshold.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/progress)

[![Spinner](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/spinner-uY02B4XD.png)![Spinner](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/spinner-uY02B4XD.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/spinner)

[Spinner](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/spinner)

[Display an animated indicator showing users that content or actions are loading.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/feedback-and-status-indicators/spinner)

## Forms

Form components capture user input with built-in validation and formatting.

[![Checkbox](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/checkbox-Dkpwea5M.png)![Checkbox](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/checkbox-Dkpwea5M.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/checkbox)

[Checkbox](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/checkbox)

[Give users a clear way to make selections, such as agreeing to terms or choosing multiple items.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/checkbox)

[![Choice list](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/choicelist-C3taiTYf.png)![Choice list](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/choicelist-C3taiTYf.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/choice-list)

[Choice list](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/choice-list)

[Present multiple options for single or multiple selections.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/choice-list)

[![Color field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/color-field-B4b9P2Fa.png)![Color field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/color-field-B4b9P2Fa.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/color-field)

[Color field](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/color-field)

[Let users select a color with a color picker or as a text input.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/color-field)

[![Color picker](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/color-picker-Ci2azN2b.png)![Color picker](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/color-picker-Ci2azN2b.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/color-picker)

[Color picker](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/color-picker)

[Let users select a color from a color palette.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/color-picker)

[![Date field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/datefield-DR3VXrSv.png)![Date field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/datefield-DR3VXrSv.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/date-field)

[Date field](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/date-field)

[Let users select a specific date with a date picker.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/date-field)

[![Date picker](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/datepicker-LfjRoa-l.png)![Date picker](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/datepicker-LfjRoa-l.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/date-picker)

[Date picker](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/date-picker)

[Let users select a specific date or date range.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/date-picker)

[![Drop zone](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/dropzone-CKAyaXKP.png)![Drop zone](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/dropzone-CKAyaXKP.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/drop-zone)

[Drop zone](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/drop-zone)

[Let users upload files through drag-and-drop functionality or by activating a button.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/drop-zone)

[![Email field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/emailfield-eKgOh7y5.png)![Email field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/emailfield-eKgOh7y5.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/email-field)

[Email field](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/email-field)

[Let users enter email addresses with optimized keyboard settings.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/email-field)

[![Money field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/moneyfield-D--eZmyj.png)![Money field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/moneyfield-D--eZmyj.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/money-field)

[Money field](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/money-field)

[Collect monetary values from users with built-in currency formatting and validation.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/money-field)

[![Number field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/numberfield-ZbtDZkA4.png)![Number field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/numberfield-ZbtDZkA4.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/number-field)

[Number field](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/number-field)

[Collect numerical values from users with optimized keyboard settings and built-in validation.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/number-field)

[![Password field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/passwordfield-DAQV92BP.png)![Password field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/passwordfield-DAQV92BP.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/password-field)

[Password field](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/password-field)

[Securely collect sensitive information from users.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/password-field)

[![Search field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/searchfield-BlhhRDy_.png)![Search field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/searchfield-BlhhRDy_.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/search-field)

[Search field](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/search-field)

[Let users enter search terms using a single-line input field.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/search-field)

[![Select](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/select-us0-aMr-.png)![Select](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/select-us0-aMr-.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/select)

[Select](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/select)

[Let users pick one option from a menu.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/select)

[![Switch](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/switch-Cm89m-ep.png)![Switch](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/switch-Cm89m-ep.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/switch)

[Switch](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/switch)

[Give users a clear way to toggle options on or off.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/switch)

[![Text area](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/textarea-nrXeZcw_.png)![Text area](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/textarea-nrXeZcw_.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/text-area)

[Text area](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/text-area)

[Collect longer text content from users with a multi-line input.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/text-area)

[![Text field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/textfield-BRFDLCX-.png)![Text field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/textfield-BRFDLCX-.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/text-field)

[Text field](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/text-field)

[Let users enter or edit text within a single-line input.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/text-field)

[![URL field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/urlfield-BC-CIGN8.png)![URL field](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/urlfield-BC-CIGN8.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/url-field)

[URL field](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/url-field)

[Collect URLs from users with built-in formatting and validation.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/forms/url-field)

## Layout and structure

Layout components create consistent visual hierarchy and organize content into clear structures.

[![Box](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/box-Cf8iXVda.png)![Box](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/box-Cf8iXVda.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/box)

[Box](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/box)

[Provide a flexible container for custom designs not achievable with existing components.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/box)

[![Divider](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/divider-BKJ4qXID.png)![Divider](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/divider-BKJ4qXID.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/divider)

[Divider](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/divider)

[Create clear visual separation between elements.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/divider)

[![Grid](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/grid-ZxXCWckJ.png)![Grid](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/grid-ZxXCWckJ.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/grid)

[Grid](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/grid)

[Organize content in a matrix of rows and columns for responsive layouts.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/grid)

[![Ordered list](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/ordered-list-CH_jsS1o.png)![Ordered list](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/ordered-list-CH_jsS1o.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/ordered-list)

[Ordered list](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/ordered-list)

[Display a numbered list of related items in a specific sequence.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/ordered-list)

[![Page](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/page-SERZTx6e.png)![Page](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/page-SERZTx6e.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/page)

[Page](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/page)

[Use as the main container for placing content in your app with preset layouts and automatic spacing between elements.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/page)

[![Query container](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/querycontainer-AgYvNHsI.png)![Query container](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/querycontainer-AgYvNHsI.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/query-container)

[Query container](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/query-container)

[Establish a query container for responsive design.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/query-container)

[![Section](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/section-CSWVEB7T.png)![Section](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/section-CSWVEB7T.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/section)

[Section](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/section)

[Group related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/section)

[![Stack](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/stack-CyBtQvys.png)![Stack](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/stack-CyBtQvys.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/stack)

[Stack](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/stack)

[Organize elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/stack)

[![Table](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/table-4Q9Lk9v0.png)![Table](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/table-4Q9Lk9v0.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/table)

[Table](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/table)

[Display data clearly in rows and columns for viewing, analyzing, and comparing information.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/table)

[![Unordered list](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/unordered-list-4o-iCT8T.png)![Unordered list](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/unordered-list-4o-iCT8T.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/unordered-list)

[Unordered list](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/unordered-list)

[Display a bulleted list of related items.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/layout-and-structure/unordered-list)

## Media and visuals

Media and visual components display images, icons, and visual elements that enhance the interface.

[![Avatar](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/avatar-S-vGhLN2.png)![Avatar](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/avatar-S-vGhLN2.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/avatar)

[Avatar](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/avatar)

[Show a user's profile image or initials in a compact, visual element.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/avatar)

[![Icon](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/icon-DtYaqn20.png)![Icon](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/icon-DtYaqn20.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/icon)

[Icon](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/icon)

[Render a graphic symbol to visually communicate core parts of the interface and available actions.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/icon)

[![Image](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/image-BOpX1hGH.png)![Image](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/image-BOpX1hGH.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/image)

[Image](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/image)

[Embed an image within the interface and control its presentation.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/image)

[![Thumbnail](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/thumbnail-BOyNJp_e.png)![Thumbnail](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/thumbnail-BOyNJp_e.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/thumbnail)

[Thumbnail](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/thumbnail)

[Display a small preview image representing content, products, or media.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/media-and-visuals/thumbnail)

## Overlays

Overlay components display content above the page in focused, contextual layers.

[![Modal](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/v2.0-rc/components/modal-4t41zq84.png)![Modal](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/v2.0-rc/components/modal-4t41zq84.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/overlays/modal)

[Modal](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/overlays/modal)

[Display content in a focused overlay that blocks page interaction until dismissed.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/overlays/modal)

[![Popover](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/popover-CCUz9c3J.png)![Popover](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/popover-CCUz9c3J.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/overlays/popover)

[Popover](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/overlays/popover)

[Display content in an overlay anchored to a trigger element without blocking page interaction.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/overlays/popover)

## Typography and content

Typography components display and format text content with consistent styling.

[![Chip](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/chip-BL8GYg0F.png)![Chip](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/chip-BL8GYg0F.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/chip)

[Chip](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/chip)

[Represent user-supplied keywords that help label, organize, and categorize objects.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/chip)

[![Heading](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/heading-CSqusyHm.png)![Heading](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/heading-CSqusyHm.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/heading)

[Heading](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/heading)

[Render hierarchical titles to communicate the structure and organization of page content.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/heading)

[![Number](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/number-BJNN12BA.png)![Number](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/number-BJNN12BA.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/number)

[Number](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/number)

[Display inline numeric values with tabular numerals so figures line up in columns.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/number)

[![Paragraph](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/paragraph-i3Yad9E6.png)![Paragraph](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/paragraph-i3Yad9E6.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/paragraph)

[Paragraph](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/paragraph)

[Display a block of text that can contain inline elements such as buttons, links, or emphasized text.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/paragraph)

[![Text](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/text-Cix_2NdU.png)![Text](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/text-Cix_2NdU.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/text)

[Text](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/text)

[Display inline text with specific visual styles or tones.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/text)

[![Tooltip](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/tooltip-CGQ2AozY.png)![Tooltip](https://shopify-assets.shopifycdn.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin/components_v2/tooltip-CGQ2AozY.png)](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/tooltip)

[Tooltip](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/tooltip)

[Display helpful information in a small overlay when users hover or focus on an element.](https://shopify.dev/docs/api/app-home/v2.0-rc/web-components/typography-and-content/tooltip)

***