ProductManagerPage
v2.0.14Updated 20 Oct 2026Composed example products-admin page (Shopify parity) for a commerce back office: status tabs with counts, search + filter chips, and the pro DataTable with SKU tiles, status badges, low-stock warnings, bulk actions and a Sheet product editor.
Preview
Live · 7 stories▸Why this is recommendedpageecommercecommerceproducts+6
The default, out-of-the-box ProductManagerPage.
- ✓E-commerce merchant back offices
- ✓Product/catalog management screens
- ✓Any admin listing pairing status tabs with a selectable data grid
- i18n: a labels prop overrides every built-in string; English defaults, brand-free copy
- Pantry back-office sidebar + Topbar via AppShell
- PageHead with Add product CTA + Export / Import actions
- Status Tabs (All / Active / Draft / Archived) with live counts
- FilterBar with product/SKU search and category + stock-level chips
- DataTable with checkbox multi-select and bulk-action bar
- Product cells as muted tiles with lucide glyph + title + SKU
- Status Badges and low-stock warning treatment
- editorOpen prop raises a Sheet product editor
- ✕Direct embedding
- ✕Storefront-facing product listings (use ProductDetail / Cart pages)
- ✕Simple record lists without bulk workflows (use ListPage)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
labelsOverride every built-in string and aria-label (i18n). Merged over DEFAULT_PRODUCT_MANAGER_PAGE_LABELS (80 English keys); every template in the file accepts it. The rendered DEFAULTS are English — page templates used to hardcode their copy, which no consumer could translate or ship. MCP feedback fb_ba2ec12f.
—