skills.rest
ducnm-mimhus
ducnm-mimhusCOMMUNITY
Explore all skills by this author →
GitHub

polaris-components

Standardize Polaris v12+ component usage in React apps for consistent Shopify UI.

Updated Feb 4, 2026
Search Tags:#accessibility#react#migration#shopify#ui-patterns#polaris#component-patterns
One-click install
npx skills add https://github.com/ducnm-mimhus/Avada-Simple-Sales-Pop --skill polaris-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: polaris-components
Source: https://github.com/ducnm-mimhus/Avada-Simple-Sales-Pop/tree/main/.claude/skills/polaris
Command: npx skills add https://github.com/ducnm-mimhus/Avada-Simple-Sales-Pop --skill polaris-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Polaris usage patterns and best practices to streamline Shopify Polaris-based UI development in React apps.

Core Features & Use Cases

  • Up-to-date v12+ Polaris component usage and best practices for Button, Card, Modal, Layout, and icons.
  • Migration guidance from v11 to v12, proper v9 icon usage, and accessibility considerations.
  • Practical UI patterns for building polished Shopify apps with consistent visuals and behavior.

Quick Start

Install Polaris v12+ in your project and start building UI components using the patterns shown.

Frequently Asked Questions about polaris-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Shopify Polaris components from v11 to v12?▼

Polaris v12 migration requires replacing Stack with BlockStack or InlineStack, updating Text to Text variants, and restructuring Card with Box. This standardizes component usage to deliver consistent Shopify UI in React apps.

What is the correct way to use icons in Polaris v12 React apps?▼

Polaris v12 requires adherence to v9 icon usage guidelines for React apps. Following these standards ensures that Button, Card, and Modal components maintain consistent visual behavior and accessibility across Shopify admin dashboards and extension UIs.

Can I use Polaris v12 UI patterns for Shopify admin dashboards and extension UIs?▼

Yes, Polaris v12 UI patterns are applicable to projects building Shopify admin dashboards, storefront editors, and extension UIs. They provide standardized component patterns for Button, Card, Modal, and Layout to ensure consistent visuals and behavior.

What are the best practices for Polaris accessibility in React apps?▼

Polaris accessibility best practices involve using standardized v12 component patterns alongside proper v9 icon usage and migration guidance. Adhering to these rules for Button, Card, Modal, and Layout ensures your Shopify UI remains accessible and consistent.

Does Polaris v12 support url-based navigation for React storefront editors?▼

Yes, Polaris v12 supports url-based navigation for React storefront editors and admin dashboards. Adhering to url-based navigation along with v9 icon usage and updated component patterns ensures consistent Shopify UI behavior across extension UIs.

Related Skills

Explore More Software Engineering Skills→
giosuetedeschi-specgiosuetedeschi-spec

shopify-development

Develop Shopify apps, themes, and UI extensions with the Shopify CLI and GraphQL Admin API.

Community
Advanced
GeneralJerelGeneralJerel

Shopify Polaris Design System

Generate Polaris-based React UI components for merchant admin dashboards.

Community
Advanced
gerald-icagerald-ica

shopify-apps

Develop Shopify apps with React Router, App Bridge, webhooks, GraphQL, and Polaris.

Community
Advanced
EsellersEGEsellersEG

shopify-polaris-admin-extensions

Scaffold and validate Shopify Admin UI extensions using Shopify CLI.

Community
Intermediate