Polaris

The Polaris design system includes design patterns and guidance, including a library of UI components, tokens, and icons to build apps in the Shopify admin.

The Shopify admin is the back office where users manage their business. Shopify apps are embedded within the admin so that they can seamlessly integrate into user workflows. The Shopify admin provides a surface for embedded apps to render their UI. On the web, the surface is an iframe and in the Shopify mobile app, the surface is a WebView.

A diagram that shows the Shopify admin. The screenshot highlights an App Bridge component, which is controlled by the app but rendered by Shopify. The screenshot also highlights the other parts of the admin, which are rendered by Shopify, and the app surface, which is rendered by the app with Polaris.

Inside the app surface, we encourage you to use Polaris to create familiar and consistent user experiences. Your app should import the Polaris React library, which defines the components for the Shopify admin. Then, follow both the App Design Guidelines and the broader Polaris Guidelines to create familiar and consistent user experiences.

Polaris includes the following features:

  • Design guidance: Guidance on accessibility, colors, typography, spacing, naming, and actionable language to help you create experiences that feel like the rest of the admin.
  • Components: Reusable building blocks made of interface elements and styles, packaged through code.
  • Tokens: Named CSS values that represent design decisions for elements like color, spacing, and typography. Apply them to app designs to help unify user experiences.
  • Icons: Carefully designed icons that are focused on commerce and entrepreneurship. Use them as visual aids to help users complete tasks.
  • Patterns: Repeatable solutions to common UX problems in a specific user situation. Using the right pattern in the right context makes the admin familiar and easy to use.

On this page