Shopify Polaris Web Components

This is specifically for building Shopify App Home surfaces using Polaris Web Components, not the React library most developers are familiar with. App Home lives outside the admin iframe and requires these s-* custom elements instead of the standard @shopify/polaris package. The skill walks through the key components like s-page, s-section, s-stack, and s-box, with clear guidance on when to use each. The most helpful part is the direct comparison table showing React vs Web Components and the reminder that s-section is for card-like containers while s-box is purely for layout spacing. Good for anyone confused about why their React Polaris components aren't working in App Home.

skills.sh installs: 213
GitHub stars: 38
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add tamiror6/shopify-app-skills --skill shopify-polaris-web-components --agent claude-code

Installs into .claude/skills of the current project.

Files

Shopify Polaris Web Components

Use this skill when building UI for Shopify App Home surfaces using Polaris Web Components.

When to Use

Building App Home pages (the app surface outside of Shopify Admin iframe)
Creating UI with s-* custom elements
Designing layouts with s-section, s-stack, s-box
Building forms, modals, or lists for App Home

Important: App Home uses Polaris Web Components (s-* elements), NOT Polaris React (@shopify/polaris). These are different technologies.

Polaris React vs Web Components

Feature	Polaris React	Polaris Web Components
Use for	Embedded admin apps	App Home surfaces
Import	`@shopify/polaris`	No import (native elements)
Syntax	`<Button>`	`<s-button>`
Framework	React components	Custom HTML elements

Core Components

Page Structure

<s-page heading="Dashboard">
  <s-section heading="Overview">
    <!-- Content -->
  </s-section>
  
  <s-section heading="Settings">
    <!-- More content -->
  </s-section>
</s-page>