What’s new?
The latest news, updates, and changes to the Polaris design system.
For the latest component changes, read the Polaris React release notes.
March 2022
Content and guidelines
- Added Tokens guidelines with a new context video.
- Added All tokens section under the Tokens page.
- Renamed Experiences page to Patterns.
February 2022
Polaris React v9.0.0
Polaris React v9.0.0 is a major release that introduces breaking changes, primarily due to removing Sass functions and mixins and replacing the ThemeProvider with a simple CustomProperties component.
Read the full release notes for more information.
For instructions on updating from v8 to v9, read the migration guide.
January 2022
Polaris React v8.0.0
Polaris React v8.0.0 is a major release that introduces breaking changes, primarily due to build changes to the required node version and root font size.
Read the full release notes for more information.
For instructions on updating from v7 to v8, read the migration guide.
September 2021
Polaris React v7.0.0
Polaris React v7.0.0 is a major release that introduces breaking changes, primarily due to build changes to add dual support for React 16 and 17 and updates to the Autocomplete component.
Read the full release notes for more information.
For instructions on updating from v6 to v7, read the migration guide.
July 2021
- Added text field guidelines to the admin experience
June 2021
- Removed deprecated Sketch design resources
- Removed the Chat bots and messaging platforms from Conversational experiences.
February 2021
- Added “Command-line interfaces” section under Experiences
January 2021
Polaris React v6.0.0
Polaris React v6.0.0 is a major release that introduces breaking changes, primarily due to the new visual style.
Read the full release notes for more information.
For instructions on updating from v5 to v6, read the migration guide.
September 2020
- Added “Billing” section under Experiences
August 2020
Polaris Internationalization Foundations 2.0
- Updated the Internationalization guidelines with our latest best practices, more details, and better examples
- Added App Release Notes content guidelines
July 2020
Polaris React v5.0.0
Polaris React v5.0.0 is a major release that introduces breaking changes, primarily due to removing integrated App Bridge support as consumers using App Bridge should use the @shopify/app-bridge-react package.
Read the full release notes for more information.
For instructions on updating from v4 to v5, read the migration guide.
June 2020
- Added information architecture principles to the foundations section
April 2020
- Updated the font stack to prioritize Segoe UI over Roboto
- Removed links to the Polaris Telescope Sketch plugin, as Shopify has switched to Figma (for reference, you can find the source code on GitHub)
March 2020
- Added “Selling in person” section under Experiences
February 2020
- Added definition for the term “Customers” to the Vocabulary page
January 2020
- Deactivated inline editing within the code block on a component page
December 2019
- Updated the information architecture by breaking up the Patterns and guides section into two sections: Foundations and Experiences. High-level guidelines applicable to all Shopify experiences were migrated to the Foundations section. Specific guidance for Shopify experiences, like the Shopify admin, are located in the Experiences section. This will allow for the future contribution of documentation for areas other than the admin, and help people form mental models around the different types of patterns and guides documentation in the style guide.
- Added Merchant to customer content guidelines.
- Added guidelines for formatting localized currencies in the Patterns and guides section.
November 2019
- Reordered the Content section to prepare for some information architecture changes and additions.
October 2019
- The Sketch UI kit, illustrations and Sass files zip bundle, which used to be hosted on the Shopify/polaris releases page, are now hosted on this website.
September 2019
Content and guidelines
- Added directional language guidelines to the Actionable language section.
Components
- Released ResourceItem as its own component with Polaris React v4.1.0
August 2019
Polaris React v4.0.0
Polaris React v4.0.0 is a major release that introduces breaking changes, primarily due to updates made to component internals. This builds a stronger foundation that ensures readiness for future React performance improvements.
This release doesn’t include any new components, but it does update some components to use React Hooks. It also deletes several deprecated features and removes dependencies on legacy context and unsafe lifecycle methods. Thanks to these improvements, Polaris React is React Strict Mode compliant.
Read the full release notes for more information.
For instructions on updating from v3 to v4, read the migration guide.
Website updates
- Added links to the GitHub source and ChromaUI example previews in component pages
Content and guidelines
- Updated the principles page with our new Shopify experience values. These values help guide how we build experiences at Shopify.
- Added In-card list to the Mobile Patterns section.
July 2019
Components
- Released Filters with Polaris React v3.19.0
June 2019
Content and guidelines
- Added conversational experiences guidelines to help you craft and deliver exceptional chat bot and messaging experiences.
Tooling
- Launched Polaris icons, a collection of simple and informative icons that draw on the visual language of the Polaris design system. Use these icons in your projects or third-party apps to promote a consistent experience across the Shopify platform.
April 2019
Content and guidelines
- Added content guidelines for home cards
March 2019
Content and guidelines
- Added new accessibility recommendations to the banner, inline error, loading, toast, checkbox, radio button, and choice list components
- Updated the accessibility recommendations for the button component
- Added guidelines for designing onboarding flows to the Patterns and guides section
February 2019
Content and guidelines
- Added new accessibility recommendations to the button, link, text field, and autocomplete components
- Added writing guidelines for confirmations to the Actionable language section
Components
- Released Skeleton thumbnail with Polaris React v3.8.0
January 2019
Content and guidelines
- Added new accessibility recommendations to the data visualizations page
December 2018
Content and guidelines
- The Patterns section and Guides section of the style guide were combined into one. See the combined Patterns and guides section.
November 2018
Content and guidelines
- Polaris icons should be used purposefully. The updated icons guidelines include more detailed principles and guidelines with visual examples.
v3.0.0
Components
The following components released with Polaris React v3.0.0:
Embedded apps
- Updated Page, Modal, and Resource picker to use the new Shopify App Bridge (formerly EASDK).
- The new Toast and Loading components now also provide a wrapper around the Shopify App Bridge.
- Removed the embedded bundle, and there is no longer a distinction between embedded components and regular components. Just import the component needed and it will do the right thing based on its context.
- For more information see the embedded apps documentation and how to initialize the Shopify App Bridge.
October 2018
Open development
- Polaris React now welcomes pull requests. See the contribution guidelines for more information.
License
- Updated the Polaris React license. The source code is now under a custom license based on MIT. The license restricts Polaris React usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.
- Added the Polaris Design Guidelines License Agreement. The license restricts Polaris Design Guidelines usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications and embedded applications.
September 2018
Content and guidelines
- Using clear, consistent terminology in buttons helps merchants know what actions to take. The actionable language guidelines explain what to label buttons for different states in web, iOS, and Android.
August 2018
Website updates
- Added new links to resources on the homepage
- Component status: added links to the GitHub issues related to components under consideration and in development
- Examples for iOS and Android are gradually being rolled out to components, starting with:
Content and guidelines
- Error messages can be scary. The new error message guidelines help make errors visible to merchants, easy to understand, and helpful.
- Apply consistent spacing to improve the quality of the user interface with the new spacing guidelines.
- Type scale: changed “Display regular” to “Display medium”.
- Struggling to come up with the right data viz? Take a look at the new “Five core traits” section in data visualizations to learn how to evaluate an effective viz.
- The new Keyboard accessories page describes how to handle the keyboard on mobile devices.
Components
- Inline error is released with Polaris React v2.6.1.
July 2018
Content and guidelines
- Discover how sounds are used to enhance the overall experience of our product in the new sounds section
Components
- Released option list with Polaris React v2.3.0
June 2018
Website updates
- Added a CodeSandbox integration on the component playground to make it easier to take code from the examples and continue prototyping with it in a React app.
- Scrolling should now feel more natural, and works a lot better on small screens.
- You can now search for terms such as “dropshipping” or “POS” to discover the meaning behind the vocabulary used at Shopify. Thanks to Lucas C. at Algolia for the help in making this happen.
- To improve the transparency of our roadmap, the component status page now features components in development and under consideration. It also shows a list of components that are not planned.
Components
- Range slider is released with Polaris React v2.2.0
May 2018
Components
Polaris React v2.0.0. This is the first major version of Polaris React since launch. Included in this release are:
- Several new components, including data table, drop zone, app provider, and modal
- Improved existing components, such as resource list, choice list, and cards
- A few breaking API changes
Sketch UI kit
We’ve also released a new version of the Sketch UI kit to reflect the new and updated components. The new UI kit includes more Polaris icons, as well as new layout templates for common page types. We’ve also revised how the kit is organized, so it’s now easier to use as a Sketch library.
We’ll keep updating the UI kit to ensure that the components in Sketch match the latest versions in React.
Content and guidelines
- Introduced the interaction states guide, here to help merchants understand what to expect while interacting with Shopify
- Added the all new internationalization guide. Learn how to build interfaces that work for Shopify merchants in every part of the world.
- Introduced the guide to crafting the Shopify admin. The Shopify admin is where merchants set up their store and manage their business. These guidelines have practical ideas to help people who work for Shopify create a better admin for merchants.
- Created the guide to designing apps for Shopify, to help you design apps that merchants trust, understand, and ultimately fall in love with.
April 2018
Content and guidelines
- Added an all-new “What’s new” page (the one you’re currently reading 🙃)
- Added guidelines for timestamp formats in grammar and mechanics
- Added “pick up” (verb) and “pickup” (noun) to the vocabulary page
Resources
- The GraphQL API now
surfaces design tokens (colors, spacing, and font stacks):
Try this query in your browser{ designTokens { name value originalValue comment type category } }
March 2018
Content and guidelines
- Removed the “Purpose” sections on all component pages, as they often overlapped with existing content.
- Updated embedded component pages to feature more detailed usage guides. Also added some screenshots showing what embedded components look like in a Shopify app (in v2 and up, refer to the app provider component).
Component playground
- Improved the component playground to display more detailed information about props and their respective types
- Components with an
icon
prop (such as the Banner component) now show a list of all available icons in the playground - We tamed the text editor’s cursor so it doesn’t jump around unexpectedly anymore
Resources
Polaris.ase
(Adobe Swatch Exchange) andPolaris.clr
(macOS) color palettes are distributed alongside the Sketch UI kit andPolaris.sketchpalette
that you’ll find in the GitHub releases page – Download the UI Kit and palettes.- The GraphQL API powering this site was opened to the public at https://polaris.shopify.com/api – Read the API documentation.
Notable previous updates
We’re constantly updating the style guide and releasing new content for Polaris, but before March 2018, we didn’t have a place to share those updates. Here are a few you may have missed:
- Naming is hard: that’s why we documented the names we give our products, features, and icons in the new naming guidelines page
- Polaris Telescope: access Polaris from Sketch to speed up your design or development workflow