Card

Update available

Version 2.0.0 is ready to install.

This update includes performance improvements, bug fixes, and new features requested by the community.

Installation#

pnpm add @ag/ui

Usage#

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

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

Composition#

Use the following composition to build a Card:

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

Examples#

Size#

Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

Image#

Add an image before the card header to create a card with an image.

RTL#

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference#

Card#

The Card component is the root container for card content.

Prop	Type	Default
`size`	`"default" \| "sm"`	`"default"`
`className`	`string`	-

CardHeader#

The CardHeader component is used for a title, description, and optional action.

Prop	Type	Default
`className`	`string`	-

CardTitle#

The CardTitle component is used for the card title.

Prop	Type	Default
`className`	`string`	-

CardDescription#

The CardDescription component is used for helper text under the title.

Prop	Type	Default
`className`	`string`	-

CardAction#

The CardAction component places content in the top-right of the header (for example, a button or a badge).

Prop	Type	Default
`className`	`string`	-

CardContent#

The CardContent component is used for the main card body.

Prop	Type	Default
`className`	`string`	-

CardFooter#

The CardFooter component is used for actions and secondary content at the bottom of the card.

Prop	Type	Default
`className`	`string`	-