Generic Catalog

Advanced catalog with filtering, sorting, and pagination utilities.

Quickstart

  1. Ensure the registry is set up in Installation.
  2. Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/generic-catalog

Usage

import { GenericCatalog } from "@/components/systems/storefront/generic-catalog"

<GenericCatalog
  products={products}
  filters={{ query, inStockOnly: true, categories: ["shoes"] }}
  sortBy="price-asc"
  page={1}
  pageSize={24}
/>

API Reference

PropTypeNotes
productsStorefrontProduct[]Input product model list
filtersStorefrontFiltersQuery, price, stock, category, tags
sortByCatalogSortByfeatured | price | name | rating
page/pageSizenumberCatalog pagination controls
← Previous: Storefront SuiteNext: Generic PDP