The React layer for Polaris Web Components

Skip the boilerplate. Ship production UIs faster.

Get the UI KitBrowse Recipes

One-time purchase · Lifetime updates · No subscriptions

How it works

Write React, not web component wiring.

Polaris Web Components

<s-button
  commandfor="delete-modal"
  command="--show"
  tone="critical"
>
  Delete
</s-button>

<s-modal id="delete-modal" heading="Delete product?">
  <s-text>This action cannot be undone.</s-text>
  <span slot="primary-action">
    <s-button variant="primary" tone="critical">
      Delete
    </s-button>
  </span>
  <span slot="secondary-actions">
    <s-button>Cancel</s-button>
  </span>
</s-modal>

Manual id wiring. Web Component syntax. Slot-based composition.

With this kit

<AlertDialog
  trigger={<Button tone="critical">Delete</Button>}
  heading="Delete product?"
>
  This action cannot be undone.
</AlertDialog>

Auto-wired triggers. React composition. Same Polaris output.

Try the Recipes

Real patterns. Real interactions.

Destructive Confirmation

View Component →

Product: Blue T-Shirt

SKU: BTS-001

DeleteThis will permanently delete “Blue T-Shirt” and remove it from all collections. This action cannot be undone.Delete productCancel

Require explicit confirmation before irreversible actions.

The problem

Polaris Web Components are not React-ergonomic at the app level.

It gives you primitives that are correct — but leaves composition, state, and flows to every app.

In React, that means glue code everywhere and inconsistent patterns.

There's no shared, React-native way to build real Shopify app pages on top of Polaris.

The solution

React-friendly APIs that just work.

Recipes and primitives

DataTable, AlertDialog, StatusBanner, LoadingState...

App-level building blocks

Bulk actions, destructive flows, async job states...

Opinionated defaults with escape hatches

Copy the code. Adapt it. No lock-in.

Same Polaris foundation. Much better React DX.

Application-level recipes

Opinionated page layouts and flows built from Polaris primitives. Index pages, detail views, bulk actions, and async job UX — already wired.

React-ergonomic by design

Intent-driven APIs, predictable state ownership, and shallow trees. Designed for React apps — not raw web component wiring.

Storybook for real scenarios

Every primitive, pattern, and recipe documented in Storybook. Inspect edge cases, loading states, and destructive flows before shipping.

Copy, own, and adapt

No runtime dependency or lock-in. Copy the code into your app, customize freely, and keep full ownership. One-time purchase.

What's included

Compositions and recipes, ready to ship.

Browse all recipes
49 React primitives
16 compositions
19 ready-made recipes
Index and detail page layouts
Tables with filters and bulk actions
Destructive confirmation flows
Async job and loading states
Import, export, and setup guides

Ready to ship faster?

Buy it once. Own the code. Get new recipes when they're worth adding.

Get the UI KitBrowse Recipes