Card

Weekly digest

Sales, stock and open tasks, every Monday.

Next run Monday 9:00.

Pro

Unlimited agents, priority runs.

$24/mo

Billed yearly

Installation

pnpm dlx shadcn@latest add @paneui/card

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Weekly digest</CardTitle>
    <CardDescription>Every Monday at 9:00.</CardDescription>
  </CardHeader>
  <CardContent>Sales, stock and open tasks.</CardContent>
</Card>

Composition

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

Card variant="inset"
├── CardPanel
│   ├── CardHeader
│   └── CardContent
└── CardFooter

Examples

Variants

Sizes

With Form

Inset With Media

Link Cards

Inset With Code

API Reference

Also accepts every prop of div.

size= "default": "sm" | "default" | "lg"; Sets --card-spacing (12, 16 or 24px), used by every part for padding and gaps.
interactive= false: boolean; The whole card is one link or button: the shadow steps up on hover and focus shows the ring.
render: React.ReactElement | (props, state) => React.ReactElement; Render the card as another element, such as <a href> or your router's link.
variant= "default": "default" | "outline" | "ghost" | "inset"; outline is a 1px border with no fill or shadow, ghost has no surface, and inset turns the card into a tinted frame (4px padding) that holds a CardPanel.

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg"	"default"	Sets `--card-spacing` (12, 16 or 24px), used by every part for padding and gaps.
interactive	boolean	false	The whole card is one link or button: the shadow steps up on hover and focus shows the ring.
render	React.ReactElement \| (props, state) => React.ReactElement	—	Render the card as another element, such as `<a href>` or your router's link.
variant	"default" \| "outline" \| "ghost" \| "inset"	"default"	`outline` is a 1px border with no fill or shadow, `ghost` has no surface, and `inset` turns the card into a tinted frame (4px padding) that holds a `CardPanel`.

data-size: The size value.
data-variant: The variant value.

Data attribute	Description
data-size	The `size` value.
data-variant	The `variant` value.

CardPanel

The raised inner surface of an inset card. Also accepts every prop of div.

CardHeader

Title, description and an optional CardAction in the top-right corner. Also accepts every prop of div.

CardTitle

Also accepts every prop of div.

CardDescription

Also accepts every prop of div.

CardAction

Placed in the header's right column, spanning the title and description rows. Also accepts every prop of div.

CardContent

Also accepts every prop of div.

typeset= false: boolean | "docs" | "reading" | "chat"; Turn prose styles back on for the content inside a typeset container, or name a preset when it stands alone.

Prop	Type	Default	Description
typeset	boolean \| "docs" \| "reading" \| "chat"	false	Turn prose styles back on for the content inside a `typeset` container, or name a preset when it stands alone.

CardFooter

A row with a 8px gap between items. Also accepts every prop of div.