Sections

Utilities

Forms

Hooks

useIsMobileNew

Card

Displays content about a single subject.

Enter your email and check your inbox

Installation


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

Living room Sofa

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

Icon card

Get 15% OFF

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

15OFF

Custom spacing

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

Default spacing is --spacing(6).

Enter your email and check your inbox

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" \| "image"`	`"default"`
`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

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