Card

Displays a card with header, content, and footer sections for grouping related information.

Install

npx shadcn@latest add https://atomx.acau.net/r/card.json

Cards group related information into a visually bounded container. Use them to present summaries, settings panels, or form sections. The CardHeader / CardContent / CardFooter sub-components provide consistent internal spacing and typography; prefer them over custom divs inside a card to stay aligned with the design system.

Preview

Project Settings

Manage your project configuration.

Changes to project settings may affect all team members.

Props

`Card`

Extends React.ComponentProps<"div">. Provides the outer border, shadow, and background.

`CardHeader`

Extends React.ComponentProps<"div">. Sets up the grid layout for title + optional CardAction.

`CardTitle`

Extends React.ComponentProps<"div">. Renders the heading text in semibold.

`CardDescription`

Extends React.ComponentProps<"div">. Renders secondary text in muted style below the title.

`CardContent`

Extends React.ComponentProps<"div">. Horizontally padded container for main card body.

`CardFooter`

Extends React.ComponentProps<"div">. Flex row for action buttons or summary text.

`CardAction`

Extends React.ComponentProps<"div">. Placed inside CardHeader to anchor an action button to the top-right corner of the header.