Polaris App Home Web Components

Component catalog, rules, and patterns for the Polaris <s-*> web components on the polaris-app-home surface. Title bar configuration is via <s-page> slots — covered in the Layout & Structure catalog.

When to use

YES: Writing or editing <s-*> markup for an Admin App Home page (the Shopify-hosted iframe SPA). NO: Building post-purchase or other extensions — use post-purchase-extension and other extension skills. NO: Calling shopify.* APIs, useAppBridge, or using <s-app-nav> / <s-app-window> / save bar — use polaris-app-home-app-bridge. NO: Scaffolding a Homepage / Index / Details / Settings page or a named composition (Empty state, Setup guide, etc.) — use polaris-app-home-page-patterns first.

Instructions

1. Find the component in the Component Catalog. If missing, route through shopify-dev-mcp → search_docs_chunks with api_name: "polaris-app-home". Do NOT use fetch_full_docs for this surface.
2. Write markup following the Rules and Common Idioms.

3. Validate via shopify-dev-mcp → validate_component_codeblocks with api: "polaris-app-home". If validation fails twice on the same artifact, stop and surface the error via the AskUserQuestion tool with options: "Retry with hints", "Skip validation", "Abort". Recommended: "Retry with hints".

Rules