Card

A flexible container used to group related information and actions together in a visually distinct box.

Building a UI entirely out of raw div tags quickly leads to inconsistent padding, mismatched border radiuses, and spaghetti code. The CardBlock and ProductCardBlock provide a set of highly composable components (CardHeader, CardContent, CardFooter, ProductCard) that automatically manage internal spacing and interactive states.

E-commerce Product Cards

Complete suite of 4 reusable product cards designed for online stores, shopping platforms, and flash deal showcases.

variant"standard" | "compact" | "horizontal": controls layout orientation and sizing across ProductCard variations.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Card

npx shadcn@latest add @algorize-ui/card

components/custom/blocks/CardBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Card to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

product-card is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/product-card

Examples

Standard Card

Stack CardHeader, CardContent and CardFooter — spacing is handled for you.

variant"bordered": is the default — a subtle stroke around the surface.

Interactive

Setinteractive: for hover elevation, a border-colour change and a slight scale — the affordance that says the whole card is clickable.

Stat grid

CardHeader stacks its children by default; override that to line a title up against an icon.

variant"bordered": keeps each tile separated in a dense grid.

Blog showcase

One featured story beside the rest of the feed — both built from the same three primitives.

Keep the cover outsideCardHeader: so the image bleeds to the card's edges; overflow-hidden on the Card is what clips it to the corner radius.

Blog cards

Three posts across. The topic rides on the image, so the card body stays type-only.

Setinteractive: to make the whole card clickable — the cover then scales gently on hover, and holds still under prefers-reduced-motion.

A person as a card: a patterned banner, an avatar that overlaps it, a few numbers, and one primary action — beside a column of teammates in the compact row form.

interactivetrue: lifts the teammate rows on hover; the main profile card stays still.

Shop tiles

Pastel product tiles: a tag, a two-line title, the product on the right, and a frosted price bar with one action. The photo's backdrop and the tile share a colour, so the masked edge between them disappears.

Setinteractive: to lift the tile and zoom the photo on hover. The basket button stops propagation, so it never triggers the tile's own click.

Boarding pass

One card, two panels, a dashed perforation between them — the holes are circles filled with the page colour.

SetclassName"sm:flex-row": to turn the card's column into side-by-side panels; below sm the perforation becomes a horizontal tear.

Now playing

A horizontal card holding live state: the record turns while the track runs, and the waveform doubles as a scrubber.

Features

Learn about the Card component's flexible layout options, including headers, footers, content areas, and interactive hover effects.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Composable

Mix and match sub-components to create complex card layouts effortlessly.

Props Reference

Card

Prop	Type	Default	Description
`variant`	`"bordered" \| "default" \| "flat"`	`"bordered"`	Visual styling variant of the card container.
`interactive`	`boolean`	`false`	Enables hover elevation, scale effects, and pointer cursor.
`className`	`string`	`undefined`	Additional CSS classes applied to the root element.

ProductCard

Prop	Type	Default	Description
`title`	`string`	`-`	Product title heading (required).
`price`	`string`	`-`	Displayed product price string (required).
`variant`	`"standard" \| "compact" \| "horizontal"`	`"standard"`	Layout orientation and sizing of the product card.
`subtitle`	`string`	`undefined`	Brand name, category or secondary label.
`description`	`string`	`undefined`	Detailed product description text.
`originalPrice`	`string`	`undefined`	Strikethrough original price for discount display.
`rating`	`number`	`undefined`	Star rating score (e.g. 4.8).
`reviewsCount`	`number`	`undefined`	Total review count displayed beside rating.
`badge`	`string`	`undefined`	Tag label displayed on top corner (e.g. "Best Seller").
`badgeVariant`	`"emerald" \| "rose" \| "indigo" \| "amber" \| "zinc"`	`"emerald"`	Color theme of the badge tag.
`inStock`	`boolean`	`true`	Shows availability indicator badge on image header.
`image`	`ReactNode`	`undefined`	Image or visual graphic node for the product preview.
`colors`	`ProductColorOption[]`	`undefined`	Array of color swatch options `{ name, value }`.
`onAddToCart`	`() => void`	`undefined`	Callback triggered when clicking the Add to Cart button.
`onBuyNow`	`() => void`	`undefined`	Callback triggered when clicking Buy Now button.
`onQuickView`	`() => void`	`undefined`	Callback triggered when clicking Quick View button.
`onFavoriteToggle`	`(isLiked: boolean) => void`	`undefined`	Callback when heart button is toggled.