Card

InstallCopy Anchor Link

pnpm exec vegastack-design verify card

pnpm dlx shadcn@4.21.0 add @vegastack/card

UsageCopy Anchor Link

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

<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>;

AnatomyCopy Anchor Link

ExamplesCopy Anchor Link

CompositionCopy Anchor Link

CardHeader holds the title, the description and the action; CardContent holds the body; CardFooter holds what closes the card. CardAction places itself in the top corner of the header grid, so it is written inside CardHeader rather than floated over the card.

SizeCopy Anchor Link

Use size="sm" to set the card to the small size, which uses smaller spacing throughout.

VariantCopy Anchor Link

variant="outline" keeps the border and drops the fill, so the card reads as a bordered group on the page rather than a raised panel — a record's side-panel cards (Record Aside) and dashboard cards. default is the filled card.

SpacingCopy Anchor Link

In addition to the size prop, the --card-spacing CSS variable controls the gap between sections and the inset of every card part. Set it on the root and every part follows.

Use negative margins with -mx-(--card-spacing) to take content edge to edge while keeping it aligned with the card inset. When that content sits above a footer, add -mb-(--card-spacing) to CardContent to remove the section gap.

ImageCopy Anchor Link

Add an image before the card header to create a card with an image. The root drops its top padding and rounds the first and last image for you.

PreviewCode

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

View Event

RTLCopy Anchor Link

The card is written in logical properties throughout, so a right-to-left document mirrors the header grid, the action corner and the part insets without any extra work.

As a headingCopy Anchor Link

CardTitle renders a div by default. Pass render to make it the real heading at the level the page needs; the classes and the data-slot stay the same.

<CardTitle render={<h3 />}>Usage this month</CardTitle>

API ReferenceCopy Anchor Link

CardCopy Anchor Link

CardHeaderCopy Anchor Link

CardTitleCopy Anchor Link

CardDescriptionCopy Anchor Link

CardActionCopy Anchor Link

CardContentCopy Anchor Link

CardFooterCopy Anchor Link

AccessibilityCopy Anchor Link

• Every part renders a plain div with no implicit role, so a card adds nothing to the accessibility tree on its own. Give it the landmark or heading it deserves — pass render={<h2 />} to CardTitle, or wrap the card in a section with an accessible name.
• CardTitle is styled, not semantic, until it is given render (API-22). A page of cards still needs a real heading level so the document outline reads correctly.
• Keep the reading order the visual order: CardAction sits in the top corner but is written inside CardHeader, after the title and description, which is where a keyboard reaches it.
• An image placed before the header is decorative in these examples and takes an empty alt. Give it a real description when it carries information the copy does not.

Do / Don'tCopy Anchor Link

DeviationsCopy Anchor Link

Upstream's file plus packages/ui/upstream/patches/card.patch. Every hunk:

• BRD-1 — the card draws a real 1px border border-border instead of upstream's ring-1 ring-foreground/10 box-shadow outline. A border survives forced colours and matches Elevation. It sits inside the box, so overflow-hidden clips a full-bleed image at the border's inner edge and the corners stay concentric.
• API-22 — CardTitle renders through Base UI's useRender, so it takes render and the heading level is set on the part. The default div, the data-slot and the classes are upstream's.
• API-16 — "use client" is added: useRender calls React.useRef internally, so the module needs the client boundary to import in a Server Component.
• DOC-2 — cn is imported from @vegastack/design.

Nothing else. The --card-spacing mechanism, the seven parts and every other class are upstream's, byte for byte; the remaining diff is the repository formatter reflowing the file.