Docs › Components › Card

Shadcn Card

The shadcn/ui Card is a copy-paste React container that groups related content and actions in a bordered, rounded surface, styled with Tailwind CSS v4. It is a set of composable parts rather than a single element, which makes it the building block for pricing plans, product tiles, dashboard widgets, and stats across every ShadcnStore block.

Key features

• Composable parts (Header, Title, Description, Content, Footer) you include as needed.
• Plain styled divs, so every part accepts native attributes and Tailwind overrides.
• Works as a stat tile, a pricing plan, a product tile, or a form container.
• Dark-mode ready through shadcn design tokens.
• No primitive dependency — pure styled markup.

Installation

npx shadcn@latest add card

This adds card.tsx to @/components/ui, exporting the Card parts as styled div elements.

Usage

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one click.</CardDescription>
      </CardHeader>
      <CardContent>Settings go here.</CardContent>
      <CardFooter>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

Anatomy

A Card is composed from parts you include as needed:

Part	Purpose
Card	Outer bordered, rounded container.
CardHeader	Top section, holds the title and description.
CardTitle	Heading for the card.
CardDescription	Muted supporting text.
CardContent	Main body content.
CardFooter	Bottom section, usually for actions.

You can omit any part. A stat tile might use only CardHeader and CardContent; a confirmation card might use CardContent and CardFooter.

Content-only card

<Card>
  <CardContent>
    <p className="text-2xl font-semibold">$4,200</p>
    <p className="text-muted-foreground text-sm">Revenue this month</p>
  </CardContent>
</Card>

Props

Card and its parts are styled div elements. They accept all native div attributes (className, onClick, id, aria-*, …) and forward refs. There is no variant prop; extend styling with Tailwind classes on any part.

Accessibility

• Card is a generic container by default. If a whole card is clickable, make the primary text a real link and let the card be the click target, rather than nesting multiple interactive elements.
• Use a heading element for CardTitle where it fits the page outline so screen-reader users can navigate by heading.

When to use the Card

Use a Card to visually group content that belongs together and, often, an action that applies to it: a pricing plan with a subscribe button, a product tile with an add-to-cart, a dashboard metric, or a testimonial. Keep one clear purpose per card, and reserve the footer for the primary action. For a flat list of records with columns, a Data Table is a better fit than many cards.

Used in these blocks

• Pricing sections: plan cards with CTAs.
• Product overview: product detail cards.
• Testimonials: quote cards.
• Statistics: metric cards.

Related components

Cards usually contain other components: a Button in the footer, a Badge for status, and Input or Form fields in the body. For tabbed content inside a card, add Tabs.

FAQ

What is the shadcn card used for?

The Card groups related content and actions in a bordered, rounded container. It is used for pricing plans, product tiles, dashboard widgets, testimonials, and stats.

Does the shadcn card have variants?

No. Card is a set of composable parts (CardHeader, CardTitle, CardDescription, CardContent, CardFooter), not a variant prop. Style it with Tailwind classes as needed.

How do I make a shadcn card clickable?

Wrap the card in a link or add an onClick to the outer element, and give it focus-visible and hover styles so it reads as interactive. Avoid nesting several interactive elements inside a clickable card.

Can I customize the card's padding and borders?

Yes. You own the code in card.tsx, so edit the base classes, or override padding, radius, and border with Tailwind utilities on any part.