ProductManagerPage
v1.0.29Updated 4 Sept 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 storiesDefaultOpen ↗
▸Why this is recommendedpageecommercecommerceproducts+6
The default, out-of-the-box ProductManagerPage.
Recommended for+14
- ✓E-commerce merchant back offices
- ✓Product/catalog management screens
- ✓Any admin listing pairing status tabs with a selectable data grid
Tags+6
pageecommercecommerceproductsadminshopifycatalogback-officeexampledefault
Features+4
- 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
Not recommended for−2
- ✕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
No documented props — ProductManagerPage is composed rather than configured. See the source for its full signature.