Card

Create project

Deploy your new project in one click.

Card content goes here.

---
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 @fulldev/card

Manual

Copy and paste the card component files into your project.
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>

Composition

Use the following composition to build a Card:

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

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 "astro:assets"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import image from "@/assets/placeholder.webp"
---

<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

See the GitHub source code for more information on props.

Sidebar

Search