Card

<ComponentPreview name="card-demo" styleName="radix-nova" previewClassName="h-[30rem]" />

Installation

npx shadcn@latest add card

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="card" title="components/ui/card.tsx" styleName="radix-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

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

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

Examples

Size

Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

<ComponentPreview styleName="radix-nova" name="card-small" previewClassName="h-96" />

Image

Add an image before the card header to create a card with an image.

<ComponentPreview styleName="radix-nova" name="card-image" previewClassName="h-[32rem]" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="radix-nova" name="card-rtl" direction="rtl" previewClassName="h-[30rem]" />

API Reference

Card

The Card component is the root container for card content.

CardHeader

The CardHeader component is used for a title, description, and optional action.

CardTitle

The CardTitle component is used for the card title.

CardDescription

The CardDescription component is used for helper text under the title.

CardAction

The CardAction component places content in the top-right of the header (for example, a button or a badge).

CardContent

The CardContent component is used for the main card body.

CardFooter

The CardFooter component is used for actions and secondary content at the bottom of the card.