Card

Displays a card with header, content, and footer — with size, spacing, edge-to-edge, and image layouts.

Image

Place an image before the header for a media card.

Installation

CLI

npx @sonojs/ui@latest add card

Usage

card.tsx

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

export function Example() {
  return (
    <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>
  )
}

Props

Prop	Type	Default	Description
size	"default" · "sm"	"default"	Card density. Small uses tighter --card-spacing and title size.