polaris-fundamentals

Polaris web components organize UI elements into six categories—Actions, Forms, Feedback, Media, Structure, Titles and Text—that you select and combine to build consistent Shopify app interfaces. Start by understanding each category's purpose, apply design tokens for spacing and colors, and follow SSR compatibility rules for server-side rendering.

Design tokens are predefined values for spacing, colors, borders, radii, and typography that ensure visual consistency across your app. Apply them to components instead of hardcoding styles so your UI aligns with Shopify's design system and scales reliably across responsive breakpoints.

Yes, Polaris components are SSR-compatible and follow hydration rules for server-side rendering. Check the SSR guidelines in the Polaris documentation to ensure your component setup works correctly when rendering on the server and rehydrating on the client.

Polaris provides responsive breakpoints and patterns you apply to components to adapt layout and spacing across screen sizes. Reference the responsive pattern guidelines alongside your design tokens to ensure your app works on mobile, tablet, and desktop without manual breakpoint management.

Polaris groups components by function: Actions handle user interactions, Forms capture input, Feedback communicates status, Media displays images and video, Structure provides layout containers, and Titles and Text display content. Choose categories based on your UI need to maintain consistent patterns.

You should understand web component fundamentals before using Polaris, but this Skill covers the Polaris-specific knowledge you need—component categories, design tokens, responsive patterns, and SSR requirements—to build Shopify app UIs confidently.