Card

Enter your email below to login to your account

Installation

npx shadcn@latest add @uqudo/card

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/uqudo/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>

Every part is a plain <div>, so you can drop any of them. CardHeader is a grid: when it contains a CardAction, the action is placed in a second column aligned to the end, spanning the title and description rows.

Examples

Size

size="sm" tightens the padding and the gap between sections through the --card-spacing custom property.

Default

The regular card spacing.

Padding and gaps follow the default card spacing scale.

Small

Tighter spacing for dense layouts.

The sm size reduces padding and gaps in every section.

API Reference

Prop

Type

Sub-components

All of them render a <div>, accept className and forward every other React.ComponentProps<"div">.

Component	`data-slot`	Notes
`CardHeader`	`card-header`	Grid container. Gets a second column when it contains a `CardAction`.
`CardTitle`	`card-title`	Heading font, `text-base font-medium`.
`CardDescription`	`card-description`	Muted `text-sm` copy.
`CardAction`	`card-action`	Placed at the end of the header, spanning both rows.
`CardContent`	`card-content`	Horizontal padding only.
`CardFooter`	`card-footer`	`flex items-center`. Add `border-t` and it also gets top padding.

Data attributes

Attribute	Value
`data-slot`	`card` on the root, see table above.
`data-size`	The resolved `size` on the root.

Card

On this page