A light collection page with a sticky filter bar: a sliding category pill, toggle chips, color dots and a sort menu. Active filters pop in as removable tags, the count rolls, and the grid glides to its new order.
Autumn collection · free returns within 60 days
npx shadcn@latest add https://hyperblur.dev/r/shop-filter-chips.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shop-filter-chips.tsx.
import { ShopFilterChips } from "@/components/hyperblur/shop-filter-chips"
<ShopFilterChips onFiltersChange={(s) => console.log(s)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Outerwear and layers" | Collection heading. |
| subtitle | string | "Autumn collection · free returns within 60 days" | Line under the heading. |
| products | { id: string; name: string; category: string; price: number; color: string; colorName: string; tags: string[]; href: string }[] | 12 sample products | Products in the grid. Colors and categories are derived from them. |
| categories | string[] | Category pills. Defaults to All plus every product category. | |
| tags | string[] | ["Waterproof", "Recycled", "New", "Under $100"] | Toggle chips. A product must have every selected tag. |
| currency | string | "$" | Currency symbol. |
| defaultTags | string[] | [] | Chips selected on first render. |
| accent | string | "#1f6feb" | Accent for selected chips and color rings. |
| onFiltersChange | (state: { category: string; tags: string[]; colors: string[]; sort: "featured" | "price-asc" | "price-desc" }) => void | Called with the full filter state after each change. |