Polaris Web Components

Component catalog, rules, and patterns for polaris-app-home. MCP tool calls (doc search, validation) route through /shopify-dev-mcp.

Rules

• Never use deprecated components. Use the recommended replacement.
• <s-link> is for navigation only. Never use <s-link> for actions. Use <s-button> or <s-clickable> instead.
• showOverlay() / hideOverlay() are DOM methods, not App Bridge. Call these on <s-modal> and <s-popover> element refs directly (e.g., document.getElementById('my-modal')?.showOverlay()). They are NOT shopify.* APIs.
• SpacingKeyword / SizeKeyword scale. Numbers increase with size: small-500 (smallest) → small-400 → small-300 → small-200 → small-100 → small → base → large → large-100 → large-200 → large-300 → large-400 → large-500 (largest). Used by gap, padding, border size, etc. none is also valid for spacing/padding.

Instructions

1. Find component in the Component Catalog. If missing, invoke /shopify-dev-mcp → search_docs_chunks with api_name: "polaris-app-home". Do NOT use fetch_full_docs for this surface (deprecated).
2. Write markup following the rules above and Common Patterns.
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 to the user.

Common Patterns