Polaris

Polaris is the design system for the Shopify admin.

Design resources

Shopify provides Figma community resources for Polaris components, styles, and icons. If you are new to Figma, check out our onboarding guide, or open Figma and start designing with the Polaris:

• Component UI kit
• Style Library
• Icon Library

Development resources

The Shopify/polaris GitHub repo is an open-source monorepo made up of NPM packages, VS Code extensions, and this website. To get started, learn how to install and use the Polaris:

• React components
• Design tokens
• VS Code extension

Tutorials

Build a Shopify app

In this tutorial, you’ll create an app that merchants can access in the Shopify admin. You’ll use an app initialization command that generates starter code for building your app, and sets up your development environment so that you can work with your app using Shopify CLI.

Your app will use Polaris and App Bridge while following the App Design Guidelines.

Expand your knowledge

Polaris provides foundational design guidance for creating good merchant experiences. Here are some recommended resources to:

• Experience values
• Design guidelines
• Content fundamentals