Card

Create project

Deploy your new project in one click.

Manage

Card content goes here.

Continue

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

<Card class="w-full max-w-md">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
    <CardAction>
      <Button size="sm" variant="outline">Manage</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter class="border-t">
    <Button size="sm">Continue</Button>
  </CardFooter>
</Card>

Installation

Command

npx shadcn@latest add card

Manual

1. Copy and paste the card component files into your project.
2. Update the import paths to match your project setup.

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

Image

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

Image Card

Card with media in the top slot.

The first child image automatically gets top rounding behavior.

---
import image from "@/assets/image-placeholder.webp"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Image } from "@/components/ui/image"
---

<Card class="max-w-md">
  <Image
    src={image}
    alt="Card image"
    class="aspect-video w-full object-cover"
  />
  <CardHeader>
    <CardTitle>Image Card</CardTitle>
    <CardDescription>Card with media in the top slot.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>The first child image automatically gets top rounding behavior.</p>
  </CardContent>
</Card>

API Reference

Card

The Card component is the root container for card content.

Prop	Type	Default
class	string	-

CardHeader

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

Prop	Type	Default
class	string	-

CardTitle

The CardTitle component is used for the card title.

Prop	Type	Default
class	string	-

CardDescription

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

Prop	Type	Default
class	string	-

CardAction

The CardAction component places content in the top-right of the header.

Prop	Type	Default
class	string	-

CardContent

The CardContent component is used for the main card body.

Prop	Type	Default
class	string	-

CardFooter

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

Prop	Type	Default
class	string	-