About @shopify/polaris

The @shopify/polaris npm package is a comprehensive resource for developers looking to create or enhance user interfaces consistent with the Shopify Admin style guidelines. This powerful library is specifically designed to help developers build applications that seamlessly integrate with Shopify’s ecosystem, ensuring a cohesive user experience across the board. By utilizing @shopify/polaris, developers gain access to a wide range of pre-designed components and tools, which not only speed up the development process but also maintain visual consistency and functionality that aligns perfectly with Shopify's standards.

To start using this library in your project, simply run the command `npm install @shopify/polaris`. This command installs the Polaris package and allows developers to immediately start leveraging a variety of UI components and design elements. The installation process is straightforward, making it easy for developers to quickly integrate Polaris into their projects. With @shopify/polaris, developers are equipped with everything from form elements to layout components, all designed to work harmoniously within the Shopify platform.

One of the key benefits of using @shopify/polaris is its focus on accessibility. Every component in the Polaris library is built with accessibility in mind, ensuring that applications cater to all users, including those with disabilities. This commitment not only helps create a more inclusive environment but also complies with legal standards, potentially saving businesses from accessibility-related liabilities. Furthermore, Polaris is continually updated by Shopify, ensuring that all components meet the latest design standards and are optimized for performance and user engagement. By choosing @shopify/polaris, developers not only enhance the aesthetics and functionality of their applications but also contribute to a more accessible and equitable digital landscape.

Shopify npm packages

Find the best node modules for your project.

Search npm

@shopify/flash-list

FlashList is a more performant FlatList...

@shopify/polaris-icons

[![npm version](https://img.shields.io/npm/v/@shopify/polaris-icons.svg?style=flat)](https://www...

@shopify/polaris

Shopify’s admin product component...

@shopify/cli-kit

A set of utilities, interfaces, and models that are common across all the platform...

@shopify/cli

A CLI tool to build for the Shopify...

@shopify/draggable

The JavaScript Drag & Drop library your grandparents warned you about...

@shopify/app-bridge-core

**[Join our team and work on libraries like this one.](https://www.shopify...

@shopify/theme-check-common

@shopify/graphql-client

Shopify GraphQL Client - A lightweight generic GraphQL JS client to interact with Shopify GraphQL...

@shopify/storefront-api-client

Shopify Storefront API Client - A lightweight JS client to interact with Shopify's Storefront...

@shopify/restyle

A system for building constraint-based UI...

@shopify/theme-check-node

This is the Node.js wrapper of the runtime-agnostic [`@shopify/theme-check-common`](https://npm...

Dependencies

Core dependencies of this npm package and its dev dependencies.

@babel/core, @babel/node, @babel/preset-env, @babel/preset-react, @babel/preset-typescript, @changesets/changelog-github, @changesets/cli, @changesets/get-release-plan, @next/eslint-plugin-next, @rollup/plugin-babel, @rollup/plugin-commonjs, @rollup/plugin-image, @rollup/plugin-json, @rollup/plugin-node-resolve, @rollup/plugin-replace, @rollup/plugin-virtual, @rollup/pluginutils, @shopify/eslint-plugin, @shopify/stylelint-plugin, @shopify/typescript-configs, @size-limit/preset-small-lib, @types/jest, @types/node, babel-loader, eslint, eslint-plugin-storybook, execa, jest, jest-environment-jsdom, jest-preset-stylelint, jest-watch-typeahead, js-yaml, npm-run-all, postinstall-postinstall, prettier, rollup, rollup-plugin-node-externals, size-limit, stylelint, ts-node, turbo, typescript

Documentation

A README file for the @shopify/polaris code repository. View Code

Polaris

Build. Contribute. Evolve. Shape the merchant experience for Shopify’s core product, the admin.

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, and websites.

polaris/
├── documentation               # Documentation for working in the monorepo
├── 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

pnpm install && pnpm build

Run a command

One workspace

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

Command	Runs
`pnpm turbo run dev --filter=@shopify/polaris`	Open the react component storybook
`pnpm 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
`pnpm changeset`	Adds a new changelog entry
`pnpm lint`	Lints all workspaces
`pnpm test`	Tests all workspaces
`pnpm type-check`	Build types and check for type errors
`pnpm clean`	Remove generated files
`pnpm 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