Polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.

Status	Owner	Help
Active	@shopify/polaris	New issue

About this repo

The shopify/polaris repository is an intergalactic monorepo made up of NPM packages, VSCode extensions, Figma plugins and websites.

polaris/
├── documentation               # Documentation for working in the monorepo
├── polaris-for-figma           # Figma plugin for Polaris
├── polaris-for-vscode          # VS Code extension for Polaris
├── polaris-icons               # Icons for Polaris
├── polaris-react               # Components for @shopify/polaris package
├── polaris-tokens              # Design tokens for Polaris
├── polaris.shopify.com         # Documentation website
└── stylelint-polaris           # Rules for custom property usage and mainline coverage

Commands

Install dependencies and build workspaces

yarn && yarn build

Run a command

One workspace

Run commands from a selected workspace using turbo run <command> --filter=<workspace>... flag.

Command	Runs
yarn turbo run dev --filter=@shopify/polaris...	Open the react component storybook
yarn turbo run dev --filter=polaris.shopify.com...	Open polaris.shopify.com NextJS site

All workspaces

Run commands across all workspaces. This uses turbo run <command>.

Command	Runs
yarn changeset	Adds a new changelog entry
yarn lint	Lints all workspaces
yarn test	Tests all workspaces
yarn type-check	Build types and check for type errors
yarn clean	Remove generated files
yarn format	Format files with prettier

Contribute to this repo

Pull requests are welcome. See the contribution guidelines for more information.

Licenses

Source code is under a custom license based on MIT. The license restricts Polaris usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.

All icons and images are licensed under the Polaris Design Guidelines License Agreement