A light collection page opener: a warm banner with a serif title and floating product art, filter chips and a row of four products with wishlist hearts and a quick add overlay.
npx shadcn@latest add https://hyperblur.dev/r/shop-collection-hero.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shop-collection-hero.tsx.
import { ShopCollectionHero } from "@/components/hyperblur/shop-collection-hero"
<ShopCollectionHero title="Slow Kiln" onQuickAdd={(p) => console.log(p.name)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Collection 04 · Autumn 2026" | Label above the title. |
| title | string | "Slow Kiln" | Collection name. The last word is set in italic accent. |
| subtitle | string | "Wood-fired stoneware..." | Short description under the title. |
| primaryCta | { label: string; href: string } | { label: "Shop the collection", href: "#" } | Dark pill button in the banner. |
| secondaryCta | { label: string; href: string } | { label: "Read the lookbook", href: "#" } | Ghost button in the banner. |
| products | { name: string; price: number; category: string; shape: "vase" | "mug" | "bowl" | "carafe" | "lamp"; tone: string; glazes?: string[]; tag?: string; href?: string }[] | 7 sample products | Products. The first four that match the active filter are shown. `shape` and `tone` draw the illustration. |
| filters | string[] | Filter chips. Defaults to the unique product categories. | |
| allLabel | string | "All" | Label of the chip that shows every product. |
| defaultFilter | string | allLabel | Initially active filter. |
| onFilterChange | (filter: string) => void | Called when a chip is chosen. | |
| defaultWishlist | string[] | ["Tidepool Bowl"] | Product names that start saved. |
| onWishlistChange | (product: CollectionProduct, wished: boolean) => void | Called when a heart is toggled. | |
| onQuickAdd | (product: CollectionProduct) => void | Called from the quick add overlay. | |
| currency | string | "$" | Currency symbol placed before prices. |
| accent | string | "#c4532d" | Accent for the italic title, banner glow, hearts and the added state. |