---
title: "Collection page"
description: "Kiln & Co.'s Tableware collection: category chips, glaze, price and stock filters, a sort, a grid with Load more and a no-results state."
plan: Pro
docs: https://ui.edbn.me/docs/templates/collection-page
---

# Collection page

Kiln & Co.'s Tableware collection: category chips, glaze, price and stock filters, a sort, a grid with Load more and a no-results state.

The same store header and footer as the product page, with the cart held by the page and a breadcrumb under the header. The collection's name is the page's one h1, with its count and one line. From the product-list-filters block: category chips and a sort over the grid; glaze (with counts), price (a slider and two fields) and In stock only in a sidebar from 1024px and in a bottom sheet behind Filters below. Active filters show as removable chips with Clear all, and the count updates live. The grid shows nine pieces at a time; Load more keeps its width while it loads, then moves focus to the first new piece and says how many are showing. Pieces without a photo show a neutral tile with their kind's glyph, so no photo appears twice. When nothing matches, Clear filters brings the whole collection back. The sample opens with two filters on, Ember glaze and In stock; without it, the whole collection.

A Pro page template built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/collection-page
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, accordion, aspect-ratio, badge, breadcrumb, button, checkbox, collapsible, empty, field, input, input-group, navigation-menu, number-field, select, separator, sheet, slider, spinner, text-link, toggle-group

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More storefront templates

All 4, with install commands: https://ui.edbn.me/docs/templates/storefront (Markdown: https://ui.edbn.me/docs/templates/storefront.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt