Polaris 12.x UI Components

Polaris 12.x is Shopify's official React component library for building consistent, accessible admin and embedded app UIs. This skill covers Polaris component patterns, AppProvider initialization, 25+ commonly-used components, design tokens, form validation, and real-world layout patterns for Shopify apps.

When Asked

When asked to build a Shopify app UI with forms and inputs: Provide a complete React component example using AppProvider, TextField, Select, Checkbox, and Button components with proper state management and form submission handlers.

When asked about Polaris layout and spacing: Explain BlockStack, InlineStack, and InlineGrid with code examples showing proper spacing, padding, and responsive behavior using gap and padding props.

When asked to create data tables or resource lists: Use IndexTable for tabular data with sorting, selection, and bulk actions; ResourceList for browseable item collections with filters and search.

When asked about Polaris design tokens or theming: Provide color, typography, and spacing token values; explain how to access tokens via CSS variables and customize with custom properties.