Baby Baltazar

Card

Displays a card with header, content, and footer.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/card.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Minimal

Card Title

Standard

Card Title
A brief description of the card content.

This is the main card content area.

Full (Header + Action + Content + Footer)

Notifications
You have 3 unread messages.
JD

John Doe

Sent you a message

AB

Alice Brown

Updated the document

With Form

Sign In
Enter your credentials to continue.

Usage

How to use this component in your code.

{/* Minimal */}
<Card>
  <CardHeader><CardTitle>Title</CardTitle></CardHeader>
</Card>

{/* Full with Action */}
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
    <CardAction><Button variant="ghost" size="icon-sm">...</Button></CardAction>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter><Button>Action</Button></CardFooter>
</Card>