Browsable grid of products with filters, search, and quick-view — the storefront entry point.
Card-grid catalog of products with a filter rail on the left and a search bar above. Each card shows image, name, price, and a quick-view affordance. Pagination or infinite-scroll at the bottom. The canonical entry point for any product-listing flow.
Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.
Left rail with category, price, attribute filters.
Top of the grid — keyword search and sort selector.
Responsive grid; each card has image, title, price, quick-view button.
Bottom-aligned; supports page-size selection.
All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.
When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.
Ask your AI agent to scaffold this template in your project — the Builder skill knows the Product Catalog layout and the components it uses.
Two paths to your first component. Pick the one that fits how your team builds.
One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.
The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.