Card

A container for grouping related content and actions.

displaylayout

Loading preview...

Installation

npx baseui-cn add card

Usage

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

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

Examples

Basic

A simple card with header and content.

Loading preview...

With footer

Card with a form and footer actions.

Loading preview...

With action

Header action button for quick interactions.

Loading preview...

Small size

Compact cards for stats and metrics.

Loading preview...

With image

Card featuring a cover image.

Loading preview...

API

Card

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "elevated" \| "ghost"`	`"default"`	Border and shadow treatment of the card surface
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Padding scale of the card