Card

Groups related content and actions on one surface.

Enter your email below to login to your account

Password

<Card>  <CardHeader>    <CardTitle>Login to your account</CardTitle>    <CardDescription>      Enter your email below to login to your account    </CardDescription>    <CardAction>      <Button variant="link">Sign Up</Button>    </CardAction>  </CardHeader>  <CardContent>    <FieldGroup>      <Field>        <FieldLabel htmlFor="email">Email</FieldLabel>        <Input id="email" placeholder="m@acme.com" type="email" />      </Field>    </FieldGroup>  </CardContent>  <CardFooter>    <Button>Login</Button>  </CardFooter></Card>

Installation

$ npx shadcn@latest add @constella/card

Usage

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

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

Composition

Card├── CardHeader│   ├── CardTitle│   ├── CardDescription│   └── CardAction├── CardContent└── CardFooter

Card Action

Put a control in CardAction to pin it to the header's end, beside the title and description, like a Dropdown Menu.

Weekly digest

Sent every Monday to 12 people.

Includes new chats, the week's most used models and spend against your budget.

<CardHeader>  <CardTitle>Weekly digest</CardTitle>  <CardDescription>Sent every Monday to 12 people.</CardDescription>  <CardAction>    <DropdownMenu>…</DropdownMenu>  </CardAction></CardHeader>

Size

Use the size prop on Card to set its padding. flush drops it, for rows that run edge to edge and pad themselves.

Scheduled reports

Weekly snapshots of your usage.

Reports go out every Monday at 9am to the workspace owners.

Size	Padding
`default`	16px
`sm`	12px
`flush`	0

<Card size="sm">  <CardHeader>    <CardTitle>Scheduled reports</CardTitle>  </CardHeader></Card>

Variant

Use the variant prop on Card to set its surface.

Variant	Surface
`default`	A `border` edge on `raised`
`well`	A `fillSubtle` tray around a card
`filled`	A `fillSubtle` fill with no edge

Well

Use variant="well" for a tinted tray around a card and the header that labels it. The card inside takes the next corner down, so the two stay concentric.

Models

Available to everyone in the workspace.

Claude OpusDefault

Claude Sonnet

Claude Haiku

<Card variant="well">  <CardHeader>    <CardTitle>Models</CardTitle>    <CardDescription>Available to everyone in the workspace.</CardDescription>  </CardHeader>  <Card size="flush">{rows}</Card></Card>

Filled

Use variant="filled" for a flat tinted section or stat that sits on the page, with no edge.

Usage this month

Resets on the 1st.

1,284 of 2,000 messages used.

<Card variant="filled">  <CardHeader>    <CardTitle>Usage this month</CardTitle>    <CardDescription>Resets on the 1st.</CardDescription>  </CardHeader>  <CardContent>1,284 of 2,000 messages used.</CardContent></Card>

Small cards fit a grid of numbers, each with its change as a status badge.

Messages

+12.5%

48,210

vs. last month

Active users

-3.1%

1,284

vs. last month

Spend

+8.0%

$3,912

vs. last month

<Card size="sm">  <CardHeader>    <CardDescription>Messages</CardDescription>    <CardAction>      <Badge color="success" variant="secondary">        +12.5%      </Badge>    </CardAction>  </CardHeader>  <CardContent>48,210</CardContent></Card>

API Reference

Part	Adds
`Card`	`size`: `"sm"`, `"default"` or `"flush"`; `variant`: `"default"`, `"well"` or `"filled"`
`CardTitle`	`render`, to make it a heading: `render={<h3 />}`

Every part takes sx, applied last, and renders a div. For render, see Base UI useRender.