GitHub

Go to...

Choose a page to open.

Displays a container with a header, content, and a footer.

Card

card-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/card.json

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
    <CardAction>Action</CardAction>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

Examples

Small

Set size="sm" to reduce the spacing.

card-small