# shopify/polaris-react **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/shopify-polaris-react).** 6,174 stars · 1,251 forks · TypeScript · NOASSERTION · archived ## Links - GitHub: https://github.com/Shopify/polaris-react - Homepage: https://polaris.shopify.com - awesome-repositories: https://awesome-repositories.com/repository/shopify-polaris-react.md ## Topics `component-library` `design-system` `design-systems` `design-tokens` `figma-plugin` `icons` `react` `shopify-polaris` `typescript` `vscode-extension` ## Description Polaris React is a production-ready component library that implements Shopify's Polaris design system for building consistent merchant-facing admin interfaces. It provides a comprehensive set of reusable React components, including accessible form inputs, data display elements, layout and navigation structures, and visual feedback indicators, all styled through a semantic color token system applied via CSS custom properties for dynamic light and dark mode support. The library distinguishes itself with an icon-first visual language featuring over 400 commerce-specific SVG icons delivered as first-class components, and a responsive grid layout system built on CSS Grid with breakpoint-aware configurations. It includes accessible component primitives that implement WAI-ARIA patterns and keyboard navigation, compound component patterns for building complex UI elements from smaller composable parts, and a deprecated component migration layer with codemods and guides for transitioning between major versions. The component surface covers form inputs with autocomplete, date pickers, and drag-and-drop file uploads; overlay components like popovers and tooltips; table components for index and tabular data displays; and typography components for applying text styles. Layout primitives include horizontal and vertical stacks, grid builders, page shells, and content grouping containers, while feedback indicators provide badges, banners, progress bars, spinners, and skeleton loading placeholders. Navigation components offer tabs, pagination, and contextual help links, and selection components include checkboxes, radio buttons, choice lists, and range sliders. ## Tags ### Part of an Awesome List - [React Component Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/react-component-libraries.md) — A production-ready React component library implementing Shopify's Polaris design system. - [Icon Sets](https://awesome-repositories.com/f/awesome-lists/devtools/icon-sets.md) — Provides over 400 commerce-focused vector icons for visual communication. ([source](https://polaris.shopify.com)) - [Commerce](https://awesome-repositories.com/f/awesome-lists/devtools/icon-sets/commerce.md) — Ships over 400 commerce-specific vector icons as first-class components. ([source](https://polaris.shopify.com)) - [Icon Renderers](https://awesome-repositories.com/f/awesome-lists/devtools/icon-sets/icon-renderers.md) — Provides an icon component for rendering scalable vector icons from a predefined set. ([source](https://polaris.shopify.com/components)) - [Icons](https://awesome-repositories.com/f/awesome-lists/devtools/icons.md) — Provides over 400 commerce-focused icons for use in admin interfaces. ([source](https://polaris.shopify.com)) - [Navigation and Layouts](https://awesome-repositories.com/f/awesome-lists/devtools/navigation-and-layouts.md) — Provides layout and navigation components including grids, stacks, tabs, popovers, and navigation elements. ### User Interface & Experience - [Admin Interface Components](https://awesome-repositories.com/f/user-interface-experience/admin-interface-components.md) — Provides reusable React components specifically designed for building consistent merchant-facing admin interfaces. - [Admin UI Toolkits](https://awesome-repositories.com/f/user-interface-experience/admin-ui-toolkits.md) — Provides specialized components for constructing merchant-facing admin dashboards. - [Accessible Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/accessible-components.md) — Provides accessible React components with built-in WAI-ARIA patterns and keyboard navigation. - [Data Display Components](https://awesome-repositories.com/f/user-interface-experience/data-display-components.md) — Ships data display components for presenting lists, tables, resource items, and paginated collections. - [Design System Components](https://awesome-repositories.com/f/user-interface-experience/design-system-components.md) — Ships a comprehensive library of pre-styled, reusable UI components implementing the Polaris design system. - [Design Tokens](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens.md) — Centralizes visual properties into design tokens for consistent color, spacing, and typography across components. ([source](https://polaris.shopify.com)) - [Form Input Components](https://awesome-repositories.com/f/user-interface-experience/form-input-components.md) — Provides accessible form input components including text fields, checkboxes, date pickers, and autocomplete. - [Accessible Form Patterns](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/accessible-form-patterns.md) — Provides accessible form components with validation patterns built for merchant workflows. - [Link Components](https://awesome-repositories.com/f/user-interface-experience/link-components.md) — Ships a link component for navigating merchants to other pages or locations within the admin interface. ([source](https://polaris.shopify.com/components)) - [Popover Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays.md) — Provides a popover component that opens a small overlay on demand and closes on outside interaction. ([source](https://polaris.shopify.com/components)) - [Modular Page Composers](https://awesome-repositories.com/f/user-interface-experience/page-headers/page-widgets/modular-page-composers.md) — Provides a page shell composer for building consistent admin page layouts with flexible containers. ([source](https://polaris.shopify.com/components)) - [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Ships a responsive grid layout system built on CSS Grid with breakpoint-aware configurations. ([source](https://polaris.shopify.com/components)) - [Index Tables](https://awesome-repositories.com/f/user-interface-experience/table-components/index-tables.md) — Ships an index table component for displaying and navigating collections of objects at a glance. ([source](https://polaris.shopify.com/components)) - [Design System Implementations](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/component-implementation-patterns/design-system-implementations.md) — Implements a design system with production-ready components enforcing consistent visual styling. - [Visual Feedback Systems](https://awesome-repositories.com/f/user-interface-experience/user-feedback-tools/visual-feedback-systems.md) — Provides visual feedback components including loading states, progress bars, banners, badges, and spinners. - [Adaptive Color Schemes](https://awesome-repositories.com/f/user-interface-experience/adaptive-color-schemes.md) — Manages distinct light and dark mode color schemes through CSS custom properties for automatic interface updates. ([source](https://polaris.shopify.com/tokens)) - [Avatar Components](https://awesome-repositories.com/f/user-interface-experience/avatar-components.md) — Provides an avatar component for displaying user or business thumbnail representations. ([source](https://polaris.shopify.com/components)) - [Badge Components](https://awesome-repositories.com/f/user-interface-experience/badge-components.md) — Ships badge components for displaying small labels that indicate the tone or status of an object. ([source](https://polaris.shopify.com/components)) - [Card Components](https://awesome-repositories.com/f/user-interface-experience/card-components.md) — Provides a media card component for introductory or highlight content in grid layouts. ([source](https://polaris.shopify.com/components)) - [Horizontal Layouts](https://awesome-repositories.com/f/user-interface-experience/card-layouts/horizontal-layouts.md) — Provides a horizontal stack layout component using Flexbox for side-by-side alignment of UI elements. ([source](https://polaris.shopify.com/components)) - [Semantic Color Assignments](https://awesome-repositories.com/f/user-interface-experience/color-systems/color-rendering-adjustments/color-saturation-adjusters/color-hierarchy-designers/color-application-techniques/semantic-color-assignments.md) — Assigns semantic color tokens for backgrounds, text, borders, and icons to maintain visual hierarchy. ([source](https://polaris.shopify.com/tokens/color)) - [Semantic Color Mappings](https://awesome-repositories.com/f/user-interface-experience/color-themes/semantic-color-mappings.md) — Maps purpose-driven color names to palette values for consistent component theming across interfaces. - [Combobox Components](https://awesome-repositories.com/f/user-interface-experience/combobox-components.md) — Ships a combobox component combining text input with a dropdown list for filtering and selecting values. ([source](https://polaris.shopify.com/components)) - [Compound Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/composition-rendering-patterns/component-patterns/compound-components.md) — Implements compound components that share implicit state across related child elements for declarative APIs. - [Light and Dark Theme Systems](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming/light-and-dark-theme-systems.md) — Implements light and dark color schemes entirely through CSS custom properties with no JavaScript runtime switching. - [Data Filtering Interfaces](https://awesome-repositories.com/f/user-interface-experience/data-filtering-interfaces.md) — Provides a data filtering interface for searching, filtering, and sorting items in an index table. ([source](https://polaris.shopify.com/components)) - [Data Tables](https://awesome-repositories.com/f/user-interface-experience/data-tables/table-data-syncers/data-tables.md) — Provides a tabular data display component for organizing and presenting dataset information in table format. ([source](https://polaris.shopify.com/components)) - [Saved Filter Views](https://awesome-repositories.com/f/user-interface-experience/data-view-customizers/custom-table-views/saved-filter-views.md) — Provides saved filter views that let users create and apply persistent configurations for index table data. ([source](https://polaris.shopify.com/components)) - [Date Pickers](https://awesome-repositories.com/f/user-interface-experience/date-pickers.md) — Includes a date picker component with a visual calendar for selecting dates or date ranges. ([source](https://polaris.shopify.com/components)) - [Primitive Box Components](https://awesome-repositories.com/f/user-interface-experience/design-token-management/design-tokens/primitive-box-components.md) — Provides a primitive box component for applying design tokens directly. ([source](https://polaris.shopify.com/components)) - [Action Lists](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/dynamic-action-list-population/action-lists.md) — Provides an action list component for displaying selectable options in popover dropdown menus. ([source](https://polaris.shopify.com/components)) - [Empty State Placeholders](https://awesome-repositories.com/f/user-interface-experience/empty-states/empty-state-actions/empty-state-placeholders.md) — Ships an empty state placeholder component for guiding users when data collections are empty. ([source](https://polaris.shopify.com/components)) - [Drag-and-Drop File Upload](https://awesome-repositories.com/f/user-interface-experience/file-uploaders/drag-and-drop-file-upload.md) — Provides a drag-and-drop file upload component that accepts files via drop zone or button click. ([source](https://polaris.shopify.com/components)) - [Checkbox Inputs](https://awesome-repositories.com/f/user-interface-experience/form-input-components/checkbox-inputs.md) — Includes checkbox input components for binary state toggles and multiple-item selection. ([source](https://polaris.shopify.com/components)) - [Form Submission Management](https://awesome-repositories.com/f/user-interface-experience/form-submission-management.md) — Ships a form submission handler that wraps inputs and manages submission events consistently. ([source](https://polaris.shopify.com/components)) - [Grouped Option Lists](https://awesome-repositories.com/f/user-interface-experience/hierarchical-menu-organization/grouped-option-lists.md) — Ships a grouped option list component for organizing selectable items into labeled categories. ([source](https://polaris.shopify.com/components)) - [Icon Libraries](https://awesome-repositories.com/f/user-interface-experience/icon-libraries.md) — Includes over 400 commerce-focused vector icons as first-class components for visual communication. - [Bulleted Lists](https://awesome-repositories.com/f/user-interface-experience/item-lists/bulleted-lists.md) — Ships bulleted and numbered list components for displaying text content with markers. ([source](https://polaris.shopify.com/components)) - [Interactive Options Lists](https://awesome-repositories.com/f/user-interface-experience/item-lists/interactive-list-items/interactive-options-lists.md) — Provides an interactive options list component with icons and descriptions for selection. ([source](https://polaris.shopify.com/components)) - [Resource Item Displays](https://awesome-repositories.com/f/user-interface-experience/item-lists/resource-item-displays.md) — Ships a resource item display component for representing objects with contextual info and detail links. ([source](https://polaris.shopify.com/components)) - [Choice Lists](https://awesome-repositories.com/f/user-interface-experience/list-components/choice-lists.md) — Ships a choice list component that groups radio buttons or checkboxes into a single interactive list. ([source](https://polaris.shopify.com/components)) - [Description Lists](https://awesome-repositories.com/f/user-interface-experience/list-components/description-lists.md) — Provides a description list component for presenting term-definition pairs in structured layouts. ([source](https://polaris.shopify.com/components)) - [Exception Lists](https://awesome-repositories.com/f/user-interface-experience/list-components/exception-lists.md) — Provides a dedicated component for highlighting exceptional information within lists. ([source](https://polaris.shopify.com/components)) - [Loading Skeletons](https://awesome-repositories.com/f/user-interface-experience/loading-skeletons.md) — Provides skeleton loading placeholders to improve perceived load times. ([source](https://polaris.shopify.com/components)) - [Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/select-inputs.md) — Includes a select input component presenting a dropdown menu for choosing one value from a list. ([source](https://polaris.shopify.com/components)) - [Notification Banners](https://awesome-repositories.com/f/user-interface-experience/notification-banners.md) — Provides banner components for displaying prominent messages about important changes or persistent conditions. ([source](https://polaris.shopify.com/components)) - [Pagination Components](https://awesome-repositories.com/f/user-interface-experience/pagination-components.md) — Provides a pagination component with buttons for navigating through ordered collections split into pages. ([source](https://polaris.shopify.com/components)) - [Progress Bars](https://awesome-repositories.com/f/user-interface-experience/progress-bars.md) — Ships a progress bar component for visually representing task completion. ([source](https://polaris.shopify.com/components)) - [Radio Button Components](https://awesome-repositories.com/f/user-interface-experience/radio-button-components.md) — Includes radio button input components for single-choice selection from mutually exclusive options. ([source](https://polaris.shopify.com/components)) - [Range Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders.md) — Ships a range slider component for selecting numeric values within defined minimum and maximum bounds. ([source](https://polaris.shopify.com/components)) - [Multi-Select Tag Groups](https://awesome-repositories.com/f/user-interface-experience/selection-management-components/multi-select-tag-groups.md) — Ships a tag management component for displaying and editing interactive keywords to label objects. ([source](https://polaris.shopify.com/components)) - [Spinners](https://awesome-repositories.com/f/user-interface-experience/spinners.md) — Ships a spinner component for indicating ongoing background processes. ([source](https://polaris.shopify.com/components)) - [Typography Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/typography-styling.md) — Provides typography components for applying text styles to establish visual hierarchy and communicate importance. ([source](https://polaris.shopify.com/components)) - [Tabbed Navigation](https://awesome-repositories.com/f/user-interface-experience/tabbed-navigation.md) — Ships a tab view switcher component for alternating among related views within the same context. ([source](https://polaris.shopify.com/components)) - [Vertical Layouts](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/item-navigation-and-selection/collapsible-items/vertical-layouts.md) — Ships a vertical stack layout component using Flexbox for arranging child elements in a column. ([source](https://polaris.shopify.com/components)) - [Form Layout Builders](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/item-navigation-and-selection/collapsible-items/vertical-layouts/form-layouts/form-layout-builders.md) — Provides a form layout builder component for managing field spacing and arrangement in admin forms. ([source](https://polaris.shopify.com/components)) - [Text Input Fields](https://awesome-repositories.com/f/user-interface-experience/text-input-fields.md) — Provides text input components for single-line and multi-line text or number entry. ([source](https://polaris.shopify.com/components)) - [Autocomplete Inputs](https://awesome-repositories.com/f/user-interface-experience/text-input-widgets/autocomplete-inputs.md) — Provides an autocomplete input component that filters and suggests options as the user types. ([source](https://polaris.shopify.com/components)) - [Tooltip Components](https://awesome-repositories.com/f/user-interface-experience/tooltip-components.md) — Ships a tooltip component that displays floating labels on hover or focus for UI elements. ([source](https://polaris.shopify.com/components)) ### Graphics & Multimedia - [Commerce Icon Libraries](https://awesome-repositories.com/f/graphics-multimedia/svg-icon-libraries/svg-icon-downloads/commerce-icon-libraries.md) — Delivers over 400 commerce-specific SVG icons as first-class components for consistent visual communication. ### Content Management & Publishing - [Content Grouping Containers](https://awesome-repositories.com/f/content-management-publishing/q-a-content-strategies/content-grouping-containers.md) — Provides content grouping containers for wrapping related concepts and tasks. ([source](https://polaris.shopify.com/components)) ### Software Engineering & Architecture - [Inline Validation Displays](https://awesome-repositories.com/f/software-engineering-architecture/error-handling/validation-error-aggregators/inline-validation-displays.md) — Provides inline validation error displays that show brief error messages next to form inputs. ([source](https://polaris.shopify.com/components)) ### Web Development - [Resource List Displays](https://awesome-repositories.com/f/web-development/display-list-generators/resource-list-displays.md) — Provides a resource list display component for navigating collections of typed objects. ([source](https://polaris.shopify.com/components))