---
title: Web components
description: Polaris web components for building consistent and accessible user interfaces in App Home.
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 (
);
}
```
***
## 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/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/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/query-container)
[Query container](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/query-container)
[The query container component establishes a container query context for responsive design.](https://shopify.dev/docs/api/app-home/web-components/layout-and-structure/query-container)
## 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)
[](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/ordered-list)
[Ordered list](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/ordered-list)
[The ordered list component displays a numbered list of related items in a specific sequence.](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/ordered-list)
[](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/unordered-list)
[Unordered list](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/unordered-list)
[The unordered list component displays a bulleted list of related items where sequence isn't critical.](https://shopify.dev/docs/api/app-home/web-components/typography-and-content/unordered-list)
***