Question 1

What is a shadcn card?

Accepted Answer

A shadcn card is a generic content container that groups related elements behind a unified border, padding system, and optional header / footer slots. Use it for login forms, dashboard widgets, blog post previews, product tiles, settings panels — anywhere you'd otherwise build a styled `

` from scratch. Built on the shadcn/ui Card primitive (Card / CardHeader / CardTitle / CardDescription / CardContent / CardFooter) and styled with Tailwind CSS. Each example in this gallery is a single self-contained TSX file.

Question 2

Are these card examples free?

Accepted Answer

Yes. Every card example on shadcn.io is free to copy and use in personal or commercial projects. There's no gated source, no attribution requirement, and no runtime dependency on shadcn.io. Browse any example, view the code, run the installer, and move on.

Question 3

How is this different from just wrapping content in a styled div?

Accepted Answer

The Card primitive is a thin wrapper, but it gives you (1) consistent border / shadow / padding tokens that respond to theme changes, (2) named semantic slots (Header / Title / Description / Content / Footer) that other shadcn components can target with class overrides, (3) accessibility-ready spacing that works at every viewport. You COULD reinvent it per project; the primitive saves you 10 lines per card and keeps the design system coherent.

Question 4

When should I use a Card versus a list, table, or alert?

Accepted Answer

Card for self-contained units of related content where each item has multiple parts (image + title + description + actions) — product tiles, blog cards, profile widgets. List/Table for ordered or scannable rows where items share a single primary attribute. Alert for ephemeral status messages. If you find yourself rendering 50+ cards in a grid, that's still cards (not a table) — but consider whether each truly has multiple parts or could collapse to a list row.

Question 5

Which card example should I start with for a login page?

Accepted Answer

The login-card example pairs a CardHeader (logo + title + description) with CardContent (form fields) and a CardFooter (submit button + secondary actions like "Forgot password?"). It's the canonical auth pattern — recreate it for sign-in, sign-up, password-reset, and 2FA prompts. Keep the card narrow (max-w-sm) so the form feels focused, not stretched.

Question 6

How do I build an image card with hero + metadata?

Accepted Answer

The image-card example shows the pattern: an `<img>` (or next/image) as the first child of Card with `aspect-video` and `object-cover`, followed by CardHeader for title + description and CardContent for the metadata (specs, price, author). Cards naturally clip overflow, so the image bleeds to the edges without manual masking. For aspect-ratio safety, wrap the image in an AspectRatio container — see the aspect-ratio examples gallery.

Question 7

How do I make a card clickable as a single tap target?

Accepted Answer

Wrap the entire Card in `<Link>` (next/link or react-router Link). Add `hover:shadow-md transition-shadow` to the Card to signal interactivity, plus `cursor-pointer`. Be careful with nested interactive elements: if the card contains a button ("Add to favorites"), use `e.stopPropagation()` on its click handler so the inner click doesn't bubble up to the wrapping link.

Question 8

How do I build a meeting-notes / dashboard widget card?

Accepted Answer

The meeting-notes-card example uses CardHeader for the date + meeting type, CardContent for an attendee avatar list (overlap pattern from the avatar gallery), and CardFooter for action buttons. Pattern repeats across dashboard widgets: 1 header line, 2-3 lines of dense content, 1 footer action row. Constrain card height (`min-h-` with `max-h-` + scroll-on-overflow) when widgets sit in a tile grid.

Question 9

How do I install a card example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The shadcn CLI copies the example's TSX source into your project at `components/examples/card/…`, plus the shadcn/ui Card primitive if you don't already have it. Replace the sample content with your own data and ship.

Question 10

How do I theme card backgrounds and borders?

Accepted Answer

Card uses CSS variables (`--card`, `--card-foreground`, `--border`) declared in your global.css. Override them under `:root` for light mode and `.dark` for dark mode and every Card adapts automatically. For one-off color treatments (tinted product cards, success/warning cards), pass className overrides directly — `className="bg-emerald-50 dark:bg-emerald-950"` etc.

Question 11

How do I add a footer that pins to the bottom in a fixed-height card?

Accepted Answer

Set the Card to a fixed height (`h-80` or `h-full` in a grid), make CardContent grow with `flex-1` (Card itself is `flex flex-col` by default), and CardFooter naturally sticks at the bottom. For dynamic content that should push the footer further down, use `mt-auto` on CardFooter as a fallback. This pattern is essential for tile grids where varying content lengths shouldn't break alignment.

Question 12

Can I use Card slots independently or in different orders?

Accepted Answer

Yes — slots are optional and order-agnostic. You can render only CardContent (no header/footer) for a minimal styled box, or place CardFooter ABOVE CardContent for inverted layouts. Note: omitting CardHeader skips the top padding adjustment, so add `pt-6` manually when going content-only without a header. The slots are convention, not constraint.

Question 13

Which libraries do card examples depend on?

Accepted Answer

shadcn/ui Card (the styled wrapper generated into your project by the CLI), Tailwind CSS (styling), and optionally Lucide React (for icons inside CardHeader actions or CardContent metadata). TypeScript is assumed. React 19 is the baseline. Image cards add next/image (when in a Next.js project) for optimization. No extra state library — cards are pure render.

Question 14

Are card examples accessible for keyboard and screen reader users?

Accepted Answer

Cards themselves are semantic divs — accessibility comes from the content and any wrapping interactive element. For clickable cards, wrap in `` or `

Question 15

Can I use these card examples with React Server Components?

Accepted Answer

Yes — Card is pure render with no client state, so it works cleanly as a Server Component. Pass server-fetched data (product info, blog post, user profile) directly into CardHeader / CardContent. Only add a client boundary if specific actions inside the card need interactivity (a favorite button, a dropdown menu) — and even then, only that action needs `"use client"`, not the whole card.

Question 16

Do these examples work with Tailwind CSS v3 and v4?

Accepted Answer

Both. shadcn.io is authored on Tailwind v4, so the examples use the v4 class names and design tokens. If you're on Tailwind v3, the classes still apply — Tailwind v4 introduced opt-in features but kept the utility naming compatible. The card / card-foreground / border tokens are declared identically across versions, just in different config locations.

React Card Examples for shadcn/ui

Browse every card example

Frequently Asked Questions