React Card Component Examples

The default Card composes two slots: Card.Preview fills the top region with flex-1 and centers its child via flex items-center justify-center, and Card.Info sits below with p-5 padding and a horizontal flex split. Drop an icon, image, or illustration into the preview slot, and a title plus description into the info slot.

Because the Card source lives in your repo after install, swapping the rounded corner radius, the border color, or the info padding is a local edit rather than a theme override. The snippet below is the minimum viable Card with both slots: a single emoji as the preview and a two-line label as the info. No wrapper div, no extra state.

Because each Card carries its own dimensions, a gallery asks almost nothing of the parent. Wrap the tiles in grid gap-4 with a column count and that is the whole layout — no per-item sizing utilities, no aspect ratio on the wrapper, no min-height guesswork. Every tile lands at 192px square, borders line up across rows, and gap is the only spacing knob you touch.

Responsive layouts work the same way: grid-cols-2 md:grid-cols-3 lg:grid-cols-4 changes the column count per breakpoint while the Card stays fixed. That is the trade the w-48 aspect-square default makes — you give up fluid width and get alignment for free. If you want tiles that stretch to fill their track instead, pass className="w-full aspect-auto" and let the grid drive both axes, since cn merges the override ahead of the base classes. Drivn runs the fixed variant on the components index and the home page.

The hover prop defaults to true. When set, the base classes apply hover:bg-accent hover:border-border hover:-translate-y-1 — a 4px upward lift plus a background and border swap. To opt out for static cards (read-only summaries, non-interactive panels), pass hover={false} and the same Card renders without any hover transition.

This matters when a card is wrapped in a non-interactive context — say a dashboard widget that displays a metric without being clickable. A hover lift on a non-interactive element implies affordance the user cannot act on, which is a small but real accessibility annoyance. Setting hover={false} is the right escape hatch. For cards that should look interactive but route to a different action than a click, see the link-wrapper example below.

To make a Card navigate when clicked, wrap it in a Next.js Link. The hover lift already in the Card signals interactivity, and the Link inherits the click target from the entire tile. Pass className="block" (or inline-block) to the Link if its default inline display crops the lift animation.

Keep accessibility in mind: a Link wrapping a Card should have meaningful inner text — a heading inside Card.Info does the job, since screen readers read the heading as the link label. Avoid wrapping a Link around a Card that already contains a Button, because nested interactive elements break keyboard tab order. If your card has both a primary destination and a secondary button action, use a card-level Link plus an onClick handler that calls event.preventDefault() on the inner button.

The Card.Info slot uses flex justify-between items-center by default, which means content placed at the start aligns left and content at the end aligns right. Drop a title on the left and a small Button on the right and you get an action card without any extra layout work.

The pattern works well for plugin install rows, settings toggles, and quick-action lists. Pair the Card with the Button component in secondary or outline variant for the right visual weight — a primary button inside a card competes with the card itself for attention. Set hover={false} on the Card so the lift does not fire when the user is aiming at the inner button.