---
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: v1.1
source_url:
html: 'https://shopify.dev/docs/api/app-home/v1.1-rc/web-components'
md: 'https://shopify.dev/docs/api/app-home/v1.1-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.
***
## Adding Polaris to your app
When you scaffold your app using [Shopify CLI](https://shopify.dev/docs/api/shopify-cli), Polaris is added to your app automatically, set up with `polaris-1.js` to follow the newest stable release of Polaris version 1. The snippets on this page load `polaris-1.1-rc.js` instead, because this reference documents the 1.1 release candidate.
You can also manually add Polaris in any framework by adding a script tag to your app's HTML head. There are two kinds of URL to choose between:
* `polaris-1.1-rc.js` names a specific release, the 1.1 release candidate that this reference documents. Load it to build against the components described here.
* `polaris-1.js` is a channel. It always serves the newest stable release in Polaris 1, and it's what we recommend for production.
To build against the components this reference documents, load the release candidate:
##### HTML
```html
```
##### Remix
```tsx
// app/root.tsx
export default function App() {
return (
);
}
```
For production, load the stable channel instead:
##### HTML
```html
```
##### Remix
```tsx
// app/root.tsx
export default function App() {
return (
);
}
```
The following table shows the different options for configuring your script tag and the version of the library that is served.
| Script tag | Serves | Notes |
| - | - | - |
| `polaris-1.js` | The newest stable release in Polaris 1, currently 1.0 | Advances each time a new 1.x release goes stable |
| `polaris-1.1-rc.js` | The 1.1 release candidate | Accumulates compatible changes and bug fixes until 1.1 goes stable |
| `polaris-1.1.js` | Polaris 1.1, once its release candidate is promoted | Security fixes only |
| `polaris-1.0.js` | Polaris 1.0, released in 2025 | Frozen as released |
| `polaris.js` | The legacy unversioned entry point, currently 1.0 | Advances to 1.1 when 1.1 goes stable, then tracks 1.x. Never serves 2.x |
### Stable releases and release candidates
For production, we recommend the stable channel, `polaris-1.js`. It always serves the newest stable release in Polaris 1, so bug fixes, accessibility improvements, and new components reach your app without a script-tag change.
Each stable release is also published at its own URL, like `polaris-1.0.js` and, once 1.1 is promoted, `polaris-1.1.js`. Published stable versions are immutable except for critical security fixes, ensuring that your app continues using the version of the library you tested against. If you need to control exactly when your app moves, name a specific version instead of the channel.
Promotion doesn't update the release candidate URL in place. The stable release publishes at its own URL instead, so moving to it is a change you make in your app's code: update the script tag to `polaris-1.1.js` for that release, or to `polaris-1.js` to follow the channel.
For the fuller story on how Polaris is versioned on the CDN, see [The Polaris CDN is adopting semantic versioning](https://shopify.dev/changelog/the-polaris-cdn-is-adopting-semantic-versioning).
***
## Available components
## Actions
Action components let users trigger events, perform tasks, and navigate through the interface.
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/button)
[Button](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/actions/button)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/button-group)
[Button group](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/button-group)
[Display multiple buttons in a layout.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/button-group)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/clickable)
[Clickable](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/clickable)
[Create custom interactive elements not achievable with Button or Link.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/clickable)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/clickable-chip)
[Clickable chip](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/clickable-chip)
[Categorize or highlight content attributes with an interactive button.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/clickable-chip)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/link)
[Link](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/link)
[Make text interactive for navigating to other pages or performing actions.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/link)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/menu)
[Menu](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/menu)
[Display a list of actions that can be performed on a resource.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/actions/menu)
## Feedback and status indicators
Feedback and status indicators display information about the status of resources and actions.
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/feedback-and-status-indicators/badge)
[Badge](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/feedback-and-status-indicators/badge)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/feedback-and-status-indicators/banner)
[Banner](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/feedback-and-status-indicators/banner)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/feedback-and-status-indicators/empty-state)
[Empty state](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/feedback-and-status-indicators/empty-state)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/feedback-and-status-indicators/spinner)
[Spinner](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/feedback-and-status-indicators/spinner)
## Forms
Form components capture user input with built-in validation and formatting.
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/checkbox)
[Checkbox](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/forms/checkbox)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/choice-list)
[Choice list](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/choice-list)
[Present multiple options for single or multiple selections.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/choice-list)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/color-field)
[Color field](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/forms/color-field)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/color-picker)
[Color picker](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/color-picker)
[Let users select a color from a color palette.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/color-picker)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/date-field)
[Date field](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/date-field)
[Let users select a specific date with a date picker.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/date-field)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/date-picker)
[Date picker](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/date-picker)
[Let users select a specific date or date range.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/date-picker)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/drop-zone)
[Drop zone](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/forms/drop-zone)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/email-field)
[Email field](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/email-field)
[Let users enter email addresses with optimized keyboard settings.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/email-field)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/money-field)
[Money field](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/forms/money-field)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/number-field)
[Number field](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/forms/number-field)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/password-field)
[Password field](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/password-field)
[Securely collect sensitive information from users.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/password-field)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/search-field)
[Search field](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/search-field)
[Let users enter search terms using a single-line input field.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/search-field)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/select)
[Select](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/select)
[Let users pick one option from a menu.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/select)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/switch)
[Switch](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/switch)
[Give users a clear way to toggle options on or off.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/switch)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/text-area)
[Text area](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/text-area)
[Collect longer text content from users with a multi-line input.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/text-area)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/text-field)
[Text field](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/text-field)
[Let users enter or edit text within a single-line input.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/text-field)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/url-field)
[URL field](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/url-field)
[Collect URLs from users with built-in formatting and validation.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/forms/url-field)
## Layout and structure
Layout components create consistent visual hierarchy and organize content into clear structures.
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/box)
[Box](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/layout-and-structure/box)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/divider)
[Divider](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/divider)
[Create clear visual separation between elements.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/divider)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/grid)
[Grid](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/layout-and-structure/grid)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/ordered-list)
[Ordered list](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/layout-and-structure/ordered-list)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/page)
[Page](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/layout-and-structure/page)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/query-container)
[Query container](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/query-container)
[Establish a query container for responsive design.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/query-container)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/section)
[Section](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/section)
[Group related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/section)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/stack)
[Stack](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/layout-and-structure/stack)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/table)
[Table](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/layout-and-structure/table)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/unordered-list)
[Unordered list](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/layout-and-structure/unordered-list)
[Display a bulleted list of related items.](https://shopify.dev/docs/api/app-home/v1.1-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.
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/media-and-visuals/avatar)
[Avatar](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/media-and-visuals/avatar)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/media-and-visuals/icon)
[Icon](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/media-and-visuals/icon)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/media-and-visuals/image)
[Image](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/media-and-visuals/image)
[Embed an image within the interface and control its presentation.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/media-and-visuals/image)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/media-and-visuals/thumbnail)
[Thumbnail](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/media-and-visuals/thumbnail)
[Display a small preview image representing content, products, or media.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/media-and-visuals/thumbnail)
## Overlays
Overlay components display content above the page in focused, contextual layers.
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/overlays/modal)
[Modal](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/overlays/modal)
[Display content in a focused overlay that blocks page interaction until dismissed.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/overlays/modal)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/overlays/popover)
[Popover](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/overlays/popover)
## Typography and content
Typography components display and format text content with consistent styling.
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/typography-and-content/chip)
[Chip](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/typography-and-content/chip)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/typography-and-content/heading)
[Heading](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/typography-and-content/heading)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/typography-and-content/number)
[Number](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/typography-and-content/number)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/typography-and-content/paragraph)
[Paragraph](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/typography-and-content/paragraph)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/typography-and-content/text)
[Text](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/typography-and-content/text)
[Display inline text with specific visual styles or tones.](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/typography-and-content/text)
[](https://shopify.dev/docs/api/app-home/v1.1-rc/web-components/typography-and-content/tooltip)
[Tooltip](https://shopify.dev/docs/api/app-home/v1.1-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/v1.1-rc/web-components/typography-and-content/tooltip)
***