Product Cards blocks for every framework.

They are 100 React product cards and tiles for a shop or a listing, in 9 groups: shop basics, offers and buying modes, electronics and gear, outdoor, sport and wheels, home and lifestyle, fashion and beauty, food and wellness, media and digital, travel, events and bookings. Each shows one kind of thing for sale, with the controls it needs: a size, a bid, a date, a spec.

Start from Product Card Grid, a shelf of tiles with a 2, 3 or 4 across density switch. Variants Product Card adds finishes and sizes with stock and price per combination, Quick View Product Card opens a panel on the tile, Comparison Product Card compares two tiles in place, and Wishlist Product Card adds a save heart with a price alert.

Look in the Offers and buying modes group: Sale Product Card for a markdown, Stepped Price Flash Sale Product Card for a price that steps up as units are claimed, plus auction, bundle, pre-order, limited edition and wholesale cards. The other groups cover the product itself, from electronics to hotels and tickets.

The products are typed data at the top of the file: an id, a name, a price in integer cents, a rating, reviews and the shapes that draw the picture. The photos are greyscale drawings made from shapes, and the shops and products are invented, so the card never needs an image file.

Each piece in Product Card Grid carries a `shapes` list that a small `Picture` component turns into a drawing, with the written description in `alt`. Replace that component with your own image element (an `img` or your framework's image component) and keep the `alt` text. Variants Product Card notes the same swap, an `img` of each colour.

Add does not call a cart. In Product Card Grid it changes local state (the button becomes Added with an Undo and the Bag count follows), and nothing is stored or bought. Put your cart request, a server action or an API call, inside that add handler and keep the state change for the optimistic update.

Prices are kept as integer cents, for example 6400 for 64 dollars, so totals such as a quantity times a unit price stay exact. Format them for display with your own locale and currency, and keep adding cents when a block sums a total.

In Variants Product Card the finish and the size you pick work out the SKU, the stock and the price. A sold-out combination stays selectable, and the status line says which one is sold out. Replace its jackets, finishes and sizes with your catalogue, or read the same values from your inventory API.

Stepped Price Flash Sale Product Card counts down from a fixed date constant (`AS_OF`) instead of the clock, and its claimed units are local state, so nothing is reserved. For a real sale, read the end time and the units left from your server and let the server decide what a claim is worth.

This page lists 100 of the category's 100 product cards blocks for React on Base UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The product cards blocks here are written on Base UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/product-card-appointment.json). The other bases are one picker away from /product-cards-block.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Base UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/product-card-appointment.json for Appointment Product Card. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Appointment Product Card brings Button, Guides, Shine Button and Toggle Group, installed before it. Nothing else changes in your project.

Use the filters above the grid: 9 kinds of product cards block, led by shop basics (15), offers and buying modes (14), electronics and gear (13) and travel, events and bookings (13), and sort by popular or name. A good first look: Appointment Product Card, Art Print Product Card and Bid Status Auction Product Card. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a product cards block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the shop basics, goods and digital and services kinds.

Open its page and use the full-screen viewer (/view/product-cards/product-card-appointment) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each product cards block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Base UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the product cards blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 product cards blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a product cards block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "product-cards"` to search_blocks to search only the 100 product cards blocks, or to list_blocks for the 9 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "product-cards", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.