You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Components are reusable building blocks made of interface elements and styles, packaged through code. Piece them together, improve them, and create new ones to solve merchant problems.
Design tokens are coded names that represent design decisions for elements like color, spacing, and typography. Applying them to our designs unifies merchant experiences.
Components are reusable building blocks made of interface elements and styles, packaged through code. Piece them together, improve them, and create new ones to solve merchant problems.
Design tokens are coded names that represent design decisions for elements like color, spacing, and typography. Applying them to our designs unifies merchant experiences.
The Polaris icon library has 400+ carefully designed icons focused on commerce and entrepreneurship. Use them as visual aids to help merchants complete tasks.
Polaris uses [Changsets](https://github.com/changesets/changesets) to handle releasing the npm packages in repository. Our [GitHub action](https://github.com/changesets/action) creates a `version` PR called **"Version Packages"**, then keeps it up to date, recreating it when merged. This PR always has an up-to-date run of `changeset version` and performs a releases when changes are merged to the `main` branch.
30
+
31
+
-[Perform a release](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md)
Design patterns are best practice design guidance. They address situations that merchants commonly face, including:
13
+
14
+
- Tasks, like searching and filtering
15
+
- Situations, like errors and loading
16
+
- UI characteristics, like feedback
17
+
- Architecture, like navigation and page layout
18
+
19
+
These patterns center on the merchant and how we build experiences to meet their needs.
20
+
21
+
Design patterns often use one or more primitive components and adapt them to the context. Some patterns can link to compositions and will contain code examples where possible.
22
+
23
+
For a deeper understanding of design patterns, read our guide to [admin design patterns](/foundations/patterns/design-patterns).
24
+
25
+
## Primitives
26
+
27
+
Primitives are the building blocks of the Polaris design system. They’re the smallest units of the system that represent codified design decisions and reusable visual elements. The Polaris design system contains primitive tokens and primitive components that can be combined together to create admin UIs.
28
+
29
+
## Components
30
+
31
+
Polaris components are the smallest reusable UI elements for supporting a variety of admin merchant experiences. Polaris components are one of our design system primitives, and are often referred to as primitive components.
32
+
33
+
These primitive components are highly composable and can be assembled together to create a variety of patterns and user experiences within the admin.
34
+
35
+
Polaris web components are packaged as the open source [@Shopify/polaris](https://github.com/Shopify/polaris/tree/main/polaris-react) React UI library. The Polaris React library is used in the Shopify admin web app as well as within embedded web views in the Shopify admin iOS and Android apps.
36
+
37
+
Polaris React Native components are also used in the Shopify admin iOS and Android apps. The Polaris React Native library is only available to Shopify employees building with React Native.
38
+
39
+
## Tokens
40
+
41
+
Design tokens represent reusable design decisions such as color, spacing, and typography. These tokens are used throughout the Polaris design system and Shopify admin to unify the merchant experience across the entire platform.
42
+
43
+
Polaris design tokens are packaged up as the open source [@Shopify/polaris-tokens](https://github.com/Shopify/polaris/tree/main/polaris-tokens) library
Polaris is the design system for the Shopify admin. It’s the shared language that guides how we build high-quality merchant experiences, and is grounded in deep merchant understanding. The Polaris components are available for web, iOS, and Android. The design system is made up of design guidance, code libraries, development opinions, and API documentation on how to build merchant experiences for the Shopify admin. Learn more about the [foundational pieces](/what-are-patterns-components-tokens) that make up the Polaris design system.
11
+
12
+
### Who is Polaris for?
13
+
14
+
Polaris is used both internally at Shopify and externally by third-party developers and designers. The Shopify admin includes installable apps built by Shopify employees and third-party developers. Third-party developers can use App Bridge and Polaris to build their Shopify admin apps. Shopify admin apps are web-based and are embedded into the admin web, iOS, and Android platforms. To learn more about building Shopify apps check out [shopify.dev](https://shopify.dev/).
15
+
16
+
17
+
### What’s the Shopify admin?
18
+
19
+
Merchants set up their store, configure settings, and manage their business using the Shopify admin. It includes core aspects of the merchant’s business, including orders, products, and customers.
20
+
21
+
The Shopify admin is available across web and native platforms. The Polaris design system is available on every platform the Shopify admin is built for.
Content guidelines are weaved into most of our component pages, but there are also product content and patterns guidelines that help us speak to merchants in a consistent way. Here are some key guidelines to check out first:
description: Learn what the Polaris design system is and how it’s used by UXers and developers to build world-class Shopify admin experiences.
4
5
keywords:
5
6
- about
@@ -14,11 +15,9 @@ keywords:
14
15
- ui kits
15
16
- plugins
16
17
order: 1
17
-
icon: HintMajor
18
+
icon: HintMajor
18
19
---
19
20
20
-
## Quick start
21
-
22
21
Polaris is the design system for the Shopify admin. There are many layers to being successful with Polaris but if you want to dive in, the first step you might want to do is download the resources.
23
22
24
23
### Downloads and links
@@ -27,118 +26,4 @@ For full descriptions of our resources, see the [develop](/getting-started/##dev
| <ul><li>[Polaris repo and commands](https://github.com/Shopify/polaris/tree/main/polaris-react)</li><ul><li>[Polaris for VS Code extension](https://marketplace.visualstudio.com/items?itemName=Shopify.polaris-for-vscode)</li><ul><li>[Component GitHub package repo](https://github.com/Shopify/polaris/tree/main/polaris-react)</li><ul><li>[Token GitHub Package Repo](https://github.com/Shopify/polaris/tree/main/polaris-tokens)</li><ul><li>[Performing a release](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md) | <ul><li>[ Design ](polaris.shopify.com/design)</li><ul><li>[Component Figma library](https://www.figma.com/community/file/1111360433678236702)</li><ul><li>[Token Figma library](https://www.figma.com/community/file/1111359207966840858)</li><ul><li>[Icon Figma library](https://www.figma.com/file/mMHFt3kEDNjLMZWowi6gnt/Polaris-Icons?node-id=753%3A2)</li><ul><li>[Product content](https://polaris.shopify.com/foundations/content/product-content)| <ul><li>[Experience values](https://polaris.shopify.com/foundations/foundations/experience-values)</li><ul><li>[Accessibility](https://polaris.shopify.com/foundations/foundations/accessibility)</li><ul><li>[React component library](https://polaris.shopify.com/components)</li><ul><li>[Token library](https://polaris.shopify.com/tokens/colors)</li><ul><li>[Icon library](https://polaris.shopify.com/icons)</li><ul><li>[Actionable language](https://polaris.shopify.com/foundations/content/actionable-language)</li><ul><li>[Error messages](https://polaris.shopify.com/foundations/patterns/error-messages)
31
-
32
-
33
-
## Polaris 101
34
-
35
-
### What is Polaris?
36
-
37
-
Polaris is the design system for the Shopify admin. It’s the shared language that guides how we build high-quality merchant experiences, and is grounded in deep merchant understanding. The Polaris components are available for web, iOS, and Android. The design system is made up of design guidance, code libraries, development opinions, and API documentation on how to build merchant experiences for the Shopify admin. Learn more about the [foundational pieces](/what-are-patterns-components-tokens) that make up the Polaris design system.
38
-
39
-
#### Who is Polaris for?
40
-
41
-
Polaris is used both internally at Shopify and externally by third-party developers and designers. The Shopify admin includes installable apps built by Shopify employees and third-party developers. Third-party developers can use App Bridge and Polaris to build their Shopify admin apps. Shopify admin apps are web-based and are embedded into the admin web, iOS, and Android platforms. To learn more about building Shopify apps check out [shopify.dev](https://shopify.dev/).
42
-
43
-
44
-
#### What’s the Shopify admin?
45
-
46
-
Merchants set up their store, configure settings, and manage their business using the Shopify admin. It includes core aspects of the merchant’s business, including orders, products, and customers.
47
-
48
-
The Shopify admin is available across web and native platforms. The Polaris design system is available on every platform the Shopify admin is built for.
49
-
50
-
### Patterns, components, and tokens
51
-
52
-
#### Patterns
53
-
54
-
Design patterns are best practice design guidance. They address situations that merchants commonly face, including:
55
-
56
-
- Tasks, like searching and filtering
57
-
- Situations, like errors and loading
58
-
- UI characteristics, like feedback
59
-
- Architecture, like navigation and page layout
60
-
61
-
These patterns center on the merchant and how we build experiences to meet their needs.
62
-
63
-
Design patterns often use one or more primitive components and adapt them to the context. Some patterns can link to compositions and will contain code examples where possible.
64
-
65
-
For a deeper understanding of design patterns, read our guide to [admin design patterns](/foundations/patterns/design-patterns).
66
-
67
-
#### Primitives
68
-
69
-
Primitives are the building blocks of the Polaris design system. They’re the smallest units of the system that represent codified design decisions and reusable visual elements. The Polaris design system contains primitive tokens and primitive components that can be combined together to create admin UIs.
70
-
71
-
#### Components
72
-
73
-
Polaris components are the smallest reusable UI elements for supporting a variety of admin merchant experiences. Polaris components are one of our design system primitives, and are often referred to as primitive components.
74
-
75
-
These primitive components are highly composable and can be assembled together to create a variety of patterns and user experiences within the admin.
76
-
77
-
Polaris web components are packaged as the open source [@Shopify/polaris](https://github.com/Shopify/polaris/tree/main/polaris-react) React UI library. The Polaris React library is used in the Shopify admin web app as well as within embedded web views in the Shopify admin iOS and Android apps.
78
-
79
-
Polaris React Native components are also used in the Shopify admin iOS and Android apps. The Polaris React Native library is only available to Shopify employees building with React Native.
80
-
81
-
#### Tokens
82
-
83
-
Design tokens represent reusable design decisions such as color, spacing, and typography. These tokens are used throughout the Polaris design system and Shopify admin to unify the merchant experience across the entire platform.
84
-
85
-
Polaris design tokens are packaged up as the open source [@Shopify/polaris-tokens](https://github.com/Shopify/polaris/tree/main/polaris-tokens) library
86
-
87
-
### Shared resources
88
-
89
-
There are pieces of foundational knowledge that are useful for all disciplines to know.
90
-
91
-
#### Foundations
92
-
Our design foundations offer fundamental design elements and guidance for creating good merchant experiences. Here are some highlights to get started:
Content guidelines are weaved into most of our component pages, but there are also product content and patterns guidelines that help us speak to merchants in a consistent way. Here are some key guidelines to check out first:
Components are reusable building blocks made of interface elements and styles, packaged through code. Piece them together, improve them, and create new ones to solve merchant problems.
Design tokens are coded names that represent design decisions for elements like color, spacing, and typography. Applying them to our designs unifies merchant experiences.
Components are reusable building blocks made of interface elements and styles, packaged through code. Piece them together, improve them, and create new ones to solve merchant problems.
Design tokens are coded names that represent design decisions for elements like color, spacing, and typography. Applying them to our designs unifies merchant experiences.
The Polaris icon library has 400+ carefully designed icons focused on commerce and entrepreneurship. Use them as visual aids to help merchants complete tasks.
Polaris uses [Changsets](https://github.com/changesets/changesets) to handle releasing the npm packages in repository. Our [GitHub action](https://github.com/changesets/action) creates a `version` PR called **"Version Packages"**, then keeps it up to date, recreating it when merged. This PR always has an up-to-date run of `changeset version` and performs a releases when changes are merged to the `main` branch.
143
-
144
-
-[Perform a release](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md)
29
+
| <ul><li>[Polaris repo and commands](https://github.com/Shopify/polaris/tree/main/polaris-react)</li><ul><li>[Polaris for VS Code extension](https://marketplace.visualstudio.com/items?itemName=Shopify.polaris-for-vscode)</li><ul><li>[Component GitHub package repo](https://github.com/Shopify/polaris/tree/main/polaris-react)</li><ul><li>[Token GitHub Package Repo](https://github.com/Shopify/polaris/tree/main/polaris-tokens)</li><ul><li>[Performing a release](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md) | <ul><li>[ Design ](polaris.shopify.com/design)</li><ul><li>[Component Figma library](https://www.figma.com/community/file/1111360433678236702)</li><ul><li>[Token Figma library](https://www.figma.com/community/file/1111359207966840858)</li><ul><li>[Icon Figma library](https://www.figma.com/file/mMHFt3kEDNjLMZWowi6gnt/Polaris-Icons?node-id=753%3A2)</li><ul><li>[Product content](https://polaris.shopify.com/foundations/content/product-content)| <ul><li>[Experience values](https://polaris.shopify.com/foundations/foundations/experience-values)</li><ul><li>[Accessibility](https://polaris.shopify.com/foundations/foundations/accessibility)</li><ul><li>[React component library](https://polaris.shopify.com/components)</li><ul><li>[Token library](https://polaris.shopify.com/tokens/colors)</li><ul><li>[Icon library](https://polaris.shopify.com/icons)</li><ul><li>[Actionable language](https://polaris.shopify.com/foundations/content/actionable-language)</li><ul><li>[Error messages](https://polaris.shopify.com/foundations/patterns/error-messages)
0 commit comments