Card

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/card.json

npx shadcn@latest add https://prototyper-ui.com/r/card.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/card.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/card.json

This will add the following files to your project:

• components/ui/card.tsx

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

Anatomy

<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>

Examples

Elevated

Interactive

With Form

Styling

Data Slots

Use data-slot attributes to target specific parts of the card:

Customization Examples

/* Make all cards have a larger radius */
[data-slot="card"] {
  @apply rounded-2xl;
}

/* Give card titles more weight */
[data-slot="card-title"] {
  @apply text-lg font-bold;
}

{/* Override styles via className */}
<Card className="rounded-2xl p-6">
  {/* ... */}
</Card>

API Reference

Card

The root container with surface-tier variants.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

CardHeader

Flex column container for title and description.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

CardTitle

Card heading rendered as an <h3>.

Extends React.ComponentProps<"h3">. All standard h3 props are forwarded via ...props.

CardDescription

Muted supporting text rendered as a <p>.

Extends React.ComponentProps<"p">. All standard p props are forwarded via ...props.

CardContent

Main content area with flex-1 growth.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

CardFooter

Horizontal flex container for action buttons.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

cardVariants

Use cardVariants to apply card styles to non-card elements:

import { cardVariants } from "@/components/ui/card"

<div className={cardVariants({ variant: "elevated", interactive: true })}>
  Custom card element
</div>

Accessibility

Keyboard Interactions

Card is a non-interactive presentational container and does not have keyboard interactions. When the interactive prop is set, the card gains a pointer cursor but remains a <div> -- wrap it in an <a> or <button> if it should be keyboard-focusable.

ARIA Attributes

• Card renders as a plain <div> with no implicit ARIA role.
• Use role="region" with aria-label if the card represents a distinct landmark.
• When used with interactive, consider wrapping in an interactive element (<a>, <button>) for proper keyboard and screen reader support.

Related