A shop listing with an animated category chip row, sort select, result count and a container-responsive grid that reflows with a FLIP animation.
npx shadcn@latest add https://hyperblur.dev/r/product-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/product-grid.tsx.
import { ProductGrid } from "@/components/hyperblur/product-grid"
<ProductGrid defaultCategory="Lighting" defaultSort="price-asc" />| Prop | Type | Default | Description |
|---|---|---|---|
| products | { id: string; name: string; category: string; price: number; rating: number; colors: [string, string]; shape?: "orb" | "arch" | "ring" | "bars" }[] | defaultProducts | Products to list. Chips are built from the distinct categories. colors drive the gradient imagery. |
| allLabel | string | "All" | Label of the chip that clears the category filter. |
| category | string | Controlled active category. Pair with onCategoryChange. | |
| defaultCategory | string | allLabel | Initial category when uncontrolled. |
| onCategoryChange | (category: string) => void | Called when a chip is chosen. | |
| sort | "featured" | "price-asc" | "price-desc" | Controlled sort order. Pair with onSortChange. | |
| defaultSort | "featured" | "price-asc" | "price-desc" | "featured" | Initial sort order when uncontrolled. |
| onSortChange | (sort: ProductSort) => void | Called when the sort select changes. | |
| defaultFavorites | string[] | [] | Ids of products that start with their heart filled. |
| onFavorite | (product: Product, favorited: boolean) => void | Called when a heart is toggled. | |
| density | "comfortable" | "compact" | "comfortable" | Compact turns the cards into small horizontal rows for narrow spaces. |
| accent | string | "#2f7bff" | Color of the active chip and focus rings. |