Card

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/card.json

Usage

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

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

Title and Description

<CardHeader /> supports two usage patterns:

Using props

Pass title and description props directly to <CardHeader />.

This approach does not require <CardTitle /> or <CardDescription /> components.

<CardHeader title="Card Title" description="Card description">
  <CardAction />
</CardHeader>

Using components

Alternatively, use <CardTitle /> and <CardDescription /> as children for more control.

<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>Card description</CardDescription>
  <CardAction />
</CardHeader>

Examples

Product card

A product card with image, title, description, price, and action buttons.

Icon card

A card with an icon at the top and title, description, and action button at the bottom.

15OFF

Clickable cards

For fully clickable cards, wrap the card with Link Overlay.

Custom spacing

The [--space:--spacing("value")] utility class controls the card spacing.

Breakpoint utilities change the card spacing at different screen sizes.

  md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

API Reference

Card

Root wrapper for card layout. Supports header, body, footer.

CardMedia

Image, video, or media area. Often full-width at top.

CardHeader

Header area. Typically holds title and optional actions.

CardTitle

Card title or heading. Bold by default.

CardDescription

Card description or body text. Muted foreground for hierarchy.

CardAction

Action button or link in the card header.

CardContent

Main body content of the card.

CardFooter

Footer area. Typically holds secondary actions or metadata.