Card

Card Title

Card description goes here.

This is the card content area. Place your main content here.

Installation

pnpm dlx stera-ui add card

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
</Card>

With Action

Notifications

You have 3 unread messages.

Manage your notification preferences and stay up to date with the latest activity.

Sizes

Default size

Standard spacing and text sizes.

Card content with default padding.

Small size

Reduced spacing and text sizes.

Card content with smaller padding.

Size	Description
`default`	Standard padding
`sm`	Reduced padding

API Reference

Prop	Type	Default
`size`	`"default" \| "sm"`	`"default"`

Subcomponents

Component	Description
`CardHeader`	Top section containing title, description, and optional action
`CardTitle`	Heading text for the card
`CardDescription`	Supporting text below the title
`CardAction`	Right-aligned slot in the header for buttons or controls
`CardContent`	Main body content area
`CardFooter`	Bottom section of the card