---
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_name: app-home
source_url:
html: 'https://shopify.dev/docs/api/app-home/web-components'
md: 'https://shopify.dev/docs/api/app-home/web-components.md'
---
# 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), the Polaris library is added to your app automatically. You can also manually add Polaris in any framework by adding the following script tag to your app's HTML head:
##### HTML
```html
```
##### Remix
```tsx
// app/root.tsx
export default function App() {
return (
);
}
```
For TypeScript users, Shopify provides a companion npm library for Polaris web components types, available at [`@shopify/polaris-types`](https://www.npmjs.com/package/@shopify/polaris-types). You can install this library in your project using `yarn` or `npm`. Loading Polaris in your app from [cdn.shopify.com/shopifycloud/polaris.js](https://cdn.shopify.com/shopifycloud/polaris.js) installs the latest version of the components. To keep your types in step, specify `@shopify/polaris-types@latest` in your `package.json` file.
***
## Available components
## Actions
Action components let users trigger events, perform tasks, and navigate through the interface.
[](https://shopify.dev/docs/api/app-home/web-components/actions/button)
[Button](https://shopify.dev/docs/api/app-home/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/web-components/actions/button)
[](https://shopify.dev/docs/api/app-home/web-components/actions/clickable)
[Clickable](https://shopify.dev/docs/api/app-home/web-components/actions/clickable)
[Create custom interactive elements not achievable with Button or Link.](https://shopify.dev/docs/api/app-home/web-components/actions/clickable)
[](https://shopify.dev/docs/api/app-home/web-components/actions/link)
[Link](https://shopify.dev/docs/api/app-home/web-components/actions/link)
[Make text interactive for navigating to other pages or performing actions.](https://shopify.dev/docs/api/app-home/web-components/actions/link)
[](https://shopify.dev/docs/api/app-home/web-components/actions/menu)
[Menu](https://shopify.dev/docs/api/app-home/web-components/actions/menu)
[Display a list of actions that can be performed on a resource.](https://shopify.dev/docs/api/app-home/web-components/actions/menu)
[](https://shopify.dev/docs/api/app-home/web-components/actions/button-group)
[Button group](https://shopify.dev/docs/api/app-home/web-components/actions/button-group)
[The button group component displays multiple related buttons in a structured layout.](https://shopify.dev/docs/api/app-home/web-components/actions/button-group)
[](https://shopify.dev/docs/api/app-home/web-components/actions/clickable-chip)
[Clickable chip](https://shopify.dev/docs/api/app-home/web-components/actions/clickable-chip)
[The clickable chip component displays interactive labels or categories that users can click or remove.](https://shopify.dev/docs/api/app-home/web-components/actions/clickable-chip)
## Feedback and status indicators
Feedback and status indicators display information about the status of resources and actions.
[](https://shopify.dev/docs/api/app-home/web-components/feedback-and-status-indicators/badge)
[Badge](https://shopify.dev/docs/api/app-home/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/web-components/feedback-and-status-indicators/badge)
[](https://shopify.dev/docs/api/app-home/web-components/feedback-and-status-indicators/banner)
[Banner](https://shopify.dev/docs/api/app-home/web-components/feedback-and-status-indicators/banner)
[Highlight important information or required actions prominently within the interface.](https://shopify.dev/docs/api/app-home/web-components/feedback-and-status-indicators/banner)
[](https://shopify.dev/docs/api/app-home/web-components/feedback-and-status-indicators/spinner)
[Spinner](https://shopify.dev/docs/api/app-home/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/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/web-components/forms/checkbox)
[Checkbox](https://shopify.dev/docs/api/app-home/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/web-components/forms/checkbox)
[](https://shopify.dev/docs/api/app-home/web-components/forms/select)
[Select](https://shopify.dev/docs/api/app-home/web-components/forms/select)
[Let users pick one option from a menu.](https://shopify.dev/docs/api/app-home/web-components/forms/select)
[](https://shopify.dev/docs/api/app-home/web-components/forms/switch)
[Switch](https://shopify.dev/docs/api/app-home/web-components/forms/switch)
[Give users a clear way to toggle options on or off.](https://shopify.dev/docs/api/app-home/web-components/forms/switch)
[](https://shopify.dev/docs/api/app-home/web-components/forms/choice-list)
[Choice list](https://shopify.dev/docs/api/app-home/web-components/forms/choice-list)
[The choice list component presents multiple options for single or multiple selections.](https://shopify.dev/docs/api/app-home/web-components/forms/choice-list)
[](https://shopify.dev/docs/api/app-home/web-components/forms/color-field)
[Color field](https://shopify.dev/docs/api/app-home/web-components/forms/color-field)
[The color field component allows users to select colors through an integrated color picker or direct text input.](https://shopify.dev/docs/api/app-home/web-components/forms/color-field)
[](https://shopify.dev/docs/api/app-home/web-components/forms/color-picker)
[Color picker](https://shopify.dev/docs/api/app-home/web-components/forms/color-picker)
[The color picker component allows users to select colors from a visual color palette interface.](https://shopify.dev/docs/api/app-home/web-components/forms/color-picker)
[](https://shopify.dev/docs/api/app-home/web-components/forms/date-field)
[Date field](https://shopify.dev/docs/api/app-home/web-components/forms/date-field)
[The date field component captures date input with a consistent interface for date selection and proper validation.](https://shopify.dev/docs/api/app-home/web-components/forms/date-field)
[](https://shopify.dev/docs/api/app-home/web-components/forms/date-picker)
[Date picker](https://shopify.dev/docs/api/app-home/web-components/forms/date-picker)
[The date picker component allows merchants to select dates using a calendar interface.](https://shopify.dev/docs/api/app-home/web-components/forms/date-picker)
[](https://shopify.dev/docs/api/app-home/web-components/forms/drop-zone)
[Drop zone](https://shopify.dev/docs/api/app-home/web-components/forms/drop-zone)
[The drop zone component lets users upload files through drag-and-drop or by clicking to browse.](https://shopify.dev/docs/api/app-home/web-components/forms/drop-zone)
[](https://shopify.dev/docs/api/app-home/web-components/forms/email-field)
[Email field](https://shopify.dev/docs/api/app-home/web-components/forms/email-field)
[The email field component captures email address input.](https://shopify.dev/docs/api/app-home/web-components/forms/email-field)
[](https://shopify.dev/docs/api/app-home/web-components/forms/money-field)
[Money field](https://shopify.dev/docs/api/app-home/web-components/forms/money-field)
[The money field component collects monetary values from users with built-in currency formatting and validation.](https://shopify.dev/docs/api/app-home/web-components/forms/money-field)
[](https://shopify.dev/docs/api/app-home/web-components/forms/number-field)
[Number field](https://shopify.dev/docs/api/app-home/web-components/forms/number-field)
[The number field component captures numeric input with built-in number validation.](https://shopify.dev/docs/api/app-home/web-components/forms/number-field)
[](https://shopify.dev/docs/api/app-home/web-components/forms/password-field)
[Password field](https://shopify.dev/docs/api/app-home/web-components/forms/password-field)
[The password field component securely collects sensitive information from users.](https://shopify.dev/docs/api/app-home/web-components/forms/password-field)
[](https://shopify.dev/docs/api/app-home/web-components/forms/search-field)
[Search field](https://shopify.dev/docs/api/app-home/web-components/forms/search-field)
[The search field component captures search terms for filtering and search functionality.](https://shopify.dev/docs/api/app-home/web-components/forms/search-field)
[](https://shopify.dev/docs/api/app-home/web-components/forms/text-area)
[Text area](https://shopify.dev/docs/api/app-home/web-components/forms/text-area)
[The text area component captures multi-line text input.](https://shopify.dev/docs/api/app-home/web-components/forms/text-area)
[](https://shopify.dev/docs/api/app-home/web-components/forms/text-field)
[Text field](https://shopify.dev/docs/api/app-home/web-components/forms/text-field)
[The text field component captures single-line text input.](https://shopify.dev/docs/api/app-home/web-components/forms/text-field)
[](https://shopify.dev/docs/api/app-home/web-components/forms/url-field)
[URL field](https://shopify.dev/docs/api/app-home/web-components/forms/url-field)
[The URL field component collects URLs from users with built-in formatting and validation.](https://shopify.dev/docs/api/app-home/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/web-components/layout-and-structure/box)
[Box](https://shopify.dev/docs/api/app-home/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/web-components/layout-and-structure/box)
[](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/divider)
[Divider](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/divider)
[Create clear visual separation between elements.](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/divider)
[](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/grid)
[Grid](https://shopify.dev/docs/api/app-home/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/web-components/layout-and-structure/grid)
[](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/ordered-list)
[Ordered list](https://shopify.dev/docs/api/app-home/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/web-components/layout-and-structure/ordered-list)
[](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/page)
[Page](https://shopify.dev/docs/api/app-home/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/web-components/layout-and-structure/page)
[](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/query-container)
[Query container](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/query-container)
[Establish a query container for responsive design.](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/query-container)
[](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/section)
[Section](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/section)
[Group related content into clearly-defined thematic areas.](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/section)
[](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/stack)
[Stack](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/stack)
[Organize elements horizontally or vertically along the block or inline axis.](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/stack)
[](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/table)
[Table](https://shopify.dev/docs/api/app-home/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/web-components/layout-and-structure/table)
[](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/unordered-list)
[Unordered list](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/unordered-list)
[Display a bulleted list of related items.](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/unordered-list)
## Overlays
Overlay components display content above the page in focused, contextual layers.
[](https://shopify.dev/docs/api/app-home/web-components/overlays/modal)
[Modal](https://shopify.dev/docs/api/app-home/web-components/overlays/modal)
[Display content in a focused overlay that blocks page interaction until dismissed.](https://shopify.dev/docs/api/app-home/web-components/overlays/modal)
[](https://shopify.dev/docs/api/app-home/web-components/overlays/popover)
[Popover](https://shopify.dev/docs/api/app-home/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/web-components/overlays/popover)
## Media and visuals
Media and visual components display images, icons, and visual elements that enhance the interface.
[](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/avatar)
[Avatar](https://shopify.dev/docs/api/app-home/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/web-components/media-and-visuals/avatar)
[](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/icon)
[Icon](https://shopify.dev/docs/api/app-home/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/web-components/media-and-visuals/icon)
[](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/image)
[Image](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/image)
[Embed an image within the interface and control its presentation.](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/image)
[](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/thumbnail)
[Thumbnail](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/thumbnail)
[Display a small preview image representing content, products, or media.](https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/thumbnail)
## Typography and content
Typography components display and format text content with consistent styling.
[](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/chip)
[Chip](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/chip)
[Represent user-supplied keywords that help label, organize, and categorize objects.](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/chip)
[](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/heading)
[Heading](https://shopify.dev/docs/api/app-home/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/web-components/typography-and-content/heading)
[](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/paragraph)
[Paragraph](https://shopify.dev/docs/api/app-home/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/web-components/typography-and-content/paragraph)
[](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/text)
[Text](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/text)
[Display inline text with specific visual styles or tones.](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/text)
[](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/tooltip)
[Tooltip](https://shopify.dev/docs/api/app-home/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/web-components/typography-and-content/tooltip)
***