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.

The Card's w-48 aspect-square default is built for a uniform grid. Pair it with a grid grid-cols-3 gap-4 (or whatever column count fits your viewport) and you get a component gallery, plugin marketplace, or product picker without per-card sizing utilities. Every tile renders 192px wide and square, the hover lift fires consistently, and the gap controls the breathing room between tiles.

For responsive layouts, swap the fixed grid-cols-3 for Tailwind's responsive grid: grid-cols-2 md:grid-cols-3 lg:grid-cols-4. The Card itself does not need to change — it carries its own dimensions, so the parent grid only decides how many columns to render at each breakpoint. This is the pattern Drivn uses for the components index and on 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.