Sections

Components

Utilities

Forms

Hooks

useIsMobile

Card

Copy Markdown

Displays content about a single subject.

PreviewCode

Enter your email and check your inbox

Send one-time codeLogin with Google

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/card

Anatomy#

Card
├── CardMedia
├── CardHeader
│ ├── CardTitle
│ ├── CardDescription
│ └── CardAction
├── CardContent
└── CardFooter

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 & Description#

CardHeader supports two usage patterns:

Using props#

Pass title and description props directly to CardHeader.

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

This approach does not require CardTitle or CardDescription components.

Using components#

Use CardTitle and CardDescription as children for more control.

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

Examples#

Product card#

PreviewCode

Living room Sofa

This sofa is perfect for modern tropical spaces, baroque inspired spaces.

Buy nowAdd to cart

Icon card#

PreviewCode

Get 15% OFF

Minimum purchase of $100 required. Use code at checkout.

15OFF

Copy code

Custom spacing#

The [--space:--spacing("value")] on Card controls the internal spacing.

Default spacing is --spacing(6).

PreviewCode

Enter your email and check your inbox

LoginLogin with Google

You can use breakpoint utilities to change the internal spacing at different screen sizes.

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

API Reference#

Card#

Root wrapper for card layout.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CSS Variable	Default
`--space`	`--spacing(6)`

CardMedia#

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

Prop	Type	Default
`variant`	`"default"	"icon"
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CardHeader#

Header area. Typically holds title and optional actions.

Prop	Type	Default
`title`	`string`	`-`
`description`	`string`	`-`
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CardTitle#

Card title or heading. Bold by default.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CardDescription#

Card description or body text. Muted foreground for hierarchy.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CardAction#

Action button or link in the card header.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CardContent#

Main body content of the card.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

CardFooter#

Footer area. Typically holds secondary actions or metadata.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

[

Calendar ](/docs/components/calendar)[

Carousel ](/docs/components/carousel)

On This Page

Installation Anatomy Usage Title & Description Using props Using components Examples Product card Icon card Custom spacing API Reference Card CardMedia CardHeader CardTitle CardDescription CardAction CardContent CardFooter