skills.rest
nhson2612
nhson2612COMMUNITY
Explore all skills by this author →
GitHub

polaris-components

Implement Shopify Polaris UI components with version 12+ standards.

Updated Jan 31, 2026
Search Tags:#react#design system#app development#ui components#shopify#polaris
One-click install
npx skills add https://github.com/nhson2612/__ --skill polaris-components-nhson2612
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: polaris-components
Source: https://github.com/nhson2612/__/tree/main/.claude/skills/polaris
Command: npx skills add https://github.com/nhson2612/__ --skill polaris-components-nhson2612

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides developers with quick access to Shopify's Polaris UI component patterns, best practices, and version-specific guidance, streamlining the development of Shopify admin interfaces.

Core Features & Use Cases

  • Component Usage: Demonstrates correct implementation of Polaris components like Page, Layout, Card, BlockStack, InlineStack, Button, Text, Modal, and Banner.
  • Best Practices: Enforces current Polaris standards, including icon versioning, navigation patterns, and spacing tokens.
  • Use Case: A developer needs to build a new settings page in a Shopify app and is unsure about the latest Polaris patterns for layout, buttons, and form elements. This Skill provides immediate, actionable examples.

Quick Start

Show me how to use the Polaris Page component with a Layout and a Card.

Frequently Asked Questions about polaris-components

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

FAQPage Schema
How do I implement layout and stacking in Shopify Polaris version 12?▼

Shopify Polaris v12+ replaces legacy stacking with BlockStack and InlineStack components. Use these alongside Layout and Page to build app interfaces with correct spacing tokens.

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

Polaris enforces strict icon versioning standards. You must import icons from the correct versioned package and pass them to components like Button or Banner to ensure UI compliance and avoid rendering errors.

How do I build a settings page in a Shopify app using Polaris UI components?▼

Build a Shopify settings page by combining the Polaris Page, Layout, and Card components. Use BlockStack for vertical spacing and Button for actions to follow current app development best practices.

Can I use Polaris modals and banners for loading states and alerts?▼

Yes, Polaris provides Modal and Banner components for alerts and interruptions. For loading states, use specific loading components to indicate progress while adhering to Polaris v12+ UI standards.

Does this Polaris guidance cover navigation patterns for Shopify admin apps?▼

Yes, the guidance emphasizes correct navigation patterns for Shopify admin interfaces. It provides actionable examples for implementing standard navigation alongside layout, text, and badge components.

Related Skills

Explore More Software Engineering Skills→
jokken79jokken79
1

shopify-apps

Automate Shopify app development with Remix, App Bridge, webhooks, and GraphQL Admin API patterns.

Community
Intermediate
oguzhanguvenkayaoguzhanguvenkaya

shopify-polaris-app-home

Build a Polaris App Home interface embedded in the Shopify admin.

Community
Intermediate
silvarojasdiegoarturo91silvarojasdiegoarturo91

shopify-admin-app

Develop a Shopify admin interface with React, Polaris, and App Bridge.

Community
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate