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, ensuring that your app looks and feels native to the Shopify admin.
Anchor to Adding Polaris to your appAdding Polaris to your app
When you scaffold your app using 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
<head>
<meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
</head>Remix
// app/root.tsx
export default function App() {
return (
<html>
<head>
<meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/polaris.js" />
</head>
</html>
);
}Anchor to Available componentsAvailable components
Anchor to ActionsActions
Action components let users trigger events, perform tasks, and navigate through the interface.
Button
Trigger actions or events, such as submitting forms, opening dialogs, or navigating to other pages.
Clickable
Create custom interactive elements not achievable with Button or Link.
Link
Make text interactive for navigating to other pages or performing actions.
Menu
Display a list of actions that can be performed on a resource.
Button group
The button group component displays multiple related buttons in a structured layout.
Clickable chip
The clickable chip component displays interactive labels or categories that users can click or remove.
Anchor to Feedback and status indicatorsFeedback and status indicators
Feedback and status indicators display information about the status of resources and actions.
Anchor to FormsForms
Form components capture user input with built-in validation and formatting.
Checkbox
Give users a clear way to make selections, such as agreeing to terms or choosing multiple items.
Select
Let users pick one option from a menu.
Switch
Give users a clear way to toggle options on or off.
Choice list
The choice list component presents multiple options for single or multiple selections.
Color field
The color field component allows users to select colors through an integrated color picker or direct text input.
Color picker
The color picker component allows users to select colors from a visual color palette interface.
Date field
The date field component captures date input with a consistent interface for date selection and proper validation.
Date picker
The date picker component allows merchants to select dates using a calendar interface.
Drop zone
The drop zone component lets users upload files through drag-and-drop or by clicking to browse.
Email field
The email field component captures email address input.
Money field
The money field component collects monetary values from users with built-in currency formatting and validation.
Number field
The number field component captures numeric input with built-in number validation.
Password field
The password field component securely collects sensitive information from users.
Search field
The search field component captures search terms for filtering and search functionality.
Text area
The text area component captures multi-line text input.
Text field
The text field component captures single-line text input.
URL field
The URL field component collects URLs from users with built-in formatting and validation.
Anchor to Layout and structureLayout and structure
Layout components create consistent visual hierarchy and organize content into clear structures.
Box
Provide a flexible container for custom designs not achievable with existing components.
Divider
Create clear visual separation between elements.
Grid
Organize content in a matrix of rows and columns for responsive layouts.
Page
Use as the main container for placing content in your app with preset layouts and automatic spacing between elements.
Section
Group related content into clearly-defined thematic areas.
Stack
Organize elements horizontally or vertically along the block or inline axis.
Table
Display data clearly in rows and columns for viewing, analyzing, and comparing information.
Query container
The query container component establishes a container query context for responsive design.
Anchor to OverlaysOverlays
Overlay components display content above the page in focused, contextual layers.
Anchor to Media and visualsMedia and visuals
Media and visual components display images, icons, and visual elements that enhance the interface.
Avatar
Show a user's profile image or initials in a compact, visual element.
Icon
Render a graphic symbol to visually communicate core parts of the interface and available actions.
Image
Embed an image within the interface and control its presentation.
Thumbnail
Display a small preview image representing content, products, or media.
Anchor to Typography and contentTypography and content
Typography components display and format text content with consistent styling.
Chip
Represent user-supplied keywords that help label, organize, and categorize objects.
Heading
Render hierarchical titles to communicate the structure and organization of page content.
Paragraph
Display a block of text that can contain inline elements such as buttons, links, or emphasized text.
Text
Display inline text with specific visual styles or tones.
Tooltip
Display helpful information in a small overlay when users hover or focus on an element.
Ordered list
The ordered list component displays a numbered list of related items in a specific sequence.
Unordered list
The unordered list component displays a bulleted list of related items where sequence isn't critical.