Card

When to UseCopy Anchor Link

• for one record and its actions, such as an invoice with its lines and “Mark as paid”
• for one figure on a dashboard, like “Outstanding” over its total
• to place a Chart, a Table, or a list under one title
• to frame a short form on a page of its own, such as “Sign in”

When Not to UseCopy Anchor Link

• for one row of a list, with media, text, and actions (use the Item component)
• for a status message (use an Alert)
• for content that floats over the page (use a Popover or a Dialog)
• for a section that opens and closes (use a Collapsible)

AnatomyCopy Anchor Link

CardHeader stacks the title and the description, and it places CardAction in a second column at its end.

SizesCopy Anchor Link

BehaviorCopy Anchor Link

A Card is as wide as its container and has no width of its own. Set the width on the column or the grid that contains it.

A Card clips content that runs past its edge.

HeaderCopy Anchor Link

To show a line under the header, add the class border-b to it.

FooterCopy Anchor Link

The content of the footer is placed in a row from the start edge. To move its Buttons to the end, add justify-end, as the preview does.

ImageCopy Anchor Link

When an img is the first child of Card, it reaches the top and side edges.

Website and brand

Website and brand

ContentCopy Anchor Link

AccessibilityCopy Anchor Link

A Card isn’t focusable and has no keys of its own. Users reach the controls inside it with Tab, in the order in which they are written.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/card

UsageCopy Anchor Link

import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

<Card>
    <CardHeader>
        <CardTitle>Outstanding</CardTitle>
        <CardDescription>$12,480.00 across 6 invoices</CardDescription>
    </CardHeader>
</Card>;

Add an ActionCopy Anchor Link

Place CardAction inside CardHeader, after the title and the description.

import { Button } from '@/components/ui/button';
import { Card, CardAction, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

<Card>
    <CardHeader>
        <CardTitle>INV-2026-014</CardTitle>
        <CardDescription>Atelier Brume, due October 27</CardDescription>
        <CardAction>
            <Button variant="outline" size="sm">
                Edit
            </Button>
        </CardAction>
    </CardHeader>
</Card>;

Add a FooterCopy Anchor Link

Place CardFooter last.

<Card>
    <CardContent>$7,703.33 for design and development.</CardContent>
    <CardFooter className="justify-end gap-2">
        <Button variant="outline">Send reminder</Button>
        <Button>Mark as paid</Button>
    </CardFooter>
</Card>

Lead With an ImageCopy Anchor Link

Place the img as the first child of Card.

<Card>
    <img src="/projects/brume.jpg" alt="" className="aspect-video object-cover" />
    <CardHeader>
        <CardTitle>Website and brand</CardTitle>
        <CardDescription>Atelier Brume, due October 24</CardDescription>
    </CardHeader>
</Card>

Expose the Title as a HeadingCopy Anchor Link

To expose the title as a heading, set role and aria-level on CardTitle, which passes them to its div.

<CardTitle role="heading" aria-level={2}>
    Recent invoices
</CardTitle>

API ReferenceCopy Anchor Link

The parts accept the props of a div.

CardCopy Anchor Link