Shadcn Product Grid

Product Grid is a storefront style product list block with a centered Our Products hero, a rounded pill category filter row, and a responsive card grid built from Shadcn UI components. Each card shows a star rating, a wishlist heart toggle, a square product photo, the name and price, and a round add to cart button, all on a soft muted surface that adapts to dark mode. Category filtering runs on simple local state, the grid collapses from three columns to one on mobile, and every color comes from the theme tokens. Available in React, Vuejs, and Svelte versions.