Card

A flexible container for grouping related content and actions

Enter your email and check your inbox

Installation


pnpm dlx shadcn@latest add @shark-ui/card

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

You can use <CardHeader /> in two ways:

Using props

You can pass title and description props directly to <CardHeader />. In this case, you don't need to use <CardTitle /> and <CardDescription /> components.


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

Using components

Alternatively, you can 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.

Living room Sofa

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

$450

Icon card

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

Get 15% OFF

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

15OFF

Custom spacing

You can use the [--space:--spacing("value")] utility class to change the spacing of the card.

Enter your email and check your inbox

You can also use breakpoint utilities to change the spacing of the card at different screen sizes.


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

API Reference

Card

Root element of the card. Renders a div

Prop	Type	Default
`className`	`string`	`-`

CardMedia

Media container for the card. Renders a div

Prop	Type	Default
`variant`	`default`, `icon`, `image`	`default`
`className`	`string`	`-`

CardHeader

Header container for the card. Renders a div

Prop	Type	Default
`title`	`string`	`-`
`description`	`string`	`-`
`className`	`string`	`-`

CardTitle

Title element for the card. Renders a div

Prop	Type	Default
`className`	`string`	`-`

CardDescription

Description element for the card. Renders a div

Prop	Type	Default
`className`	`string`	`-`

CardAction

Action element for the card header. Renders a div

Prop	Type	Default
`className`	`string`	`-`

CardContent

Content container for the card. Renders a div

Prop	Type	Default
`className`	`string`	`-`

CardFooter

Footer container for the card. Renders a div

Prop	Type	Default
`className`	`string`	`-`

On This Page

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