Product List
Product listing blocks for shadcn/ui. Product card grids and lists with prices, badges, ratings, quick-add buttons, colour swatches, and sort controls. Built for shadcn/ui.
Four-column product grid for shadcn/ui stores: a heading with result count and a Sort Select on the right, then eight portrait image cards with name, price, colour swatch dots and a "Quick add" Button that slides up on hover. The default starting point for any category or collection page.
Compare-style product list built with shadcn/ui Button and lucide Star icons: five rows separated by dividers, each with a square thumbnail, name, one-line description and star rating on the left and the price plus an "Add" Button on the right. Works well for gift guides and short curated edits.
Three-column grid of shadcn/ui Cards with merchandising cues: "New", "-20%", "Low stock" and "Bestseller" Badges pinned top-left, a Heart wishlist Button top-right that toggles its fill with useState, and sale prices shown next to a strike-through original. Made for promotional collections such as Black Week.
"You may also like" recommendation row using shadcn/ui Button: a heading and "View all" link on the left, previous/next icon Buttons on the right, and a snap-scrolling track of eight fixed-width product cards moved with scrollBy. Drop it under a product page or into the cart to cross-sell.
Magazine-style product grid with a shadcn/ui Button: a double-width, double-height featured tile with a lifestyle photo, copy and price anchors the top-left, six standard portrait cards fill around it and a muted CTA tile closes the final row. Ideal for seasonal edits and lookbook-style collections.
Category page layout built with shadcn/ui Checkbox, Label and Button: a narrow facet column with Category, Size and Colour checkbox groups on the left, and a result count, six-card product grid and Prev / 1 2 3 / Next pagination row on the right. The classic skeleton for a filterable catalogue page.
Compact B2B order list using the shadcn/ui Table, Badge and Button primitives: a heading with a "Download price list" outline Button, then eight rows with thumbnail, name, SKU, colour, unit price, a dotted stock status Badge and an "Add" Button. Built for trade customers who order by SKU rather than by browsing.