Card

A compound container component with multiple visual variants for grouping related content.

$npx shadcn add @patchui/card

Default

Project Settings

Manage your project configuration and preferences.

Configure build targets, environment variables, and deployment settings for your project.

Variants

Ghost

Transparent with bottom border.

Interactive

Hover to see the highlight effect.

With Header Action

Notifications

You have 3 unread messages.

Use CardAction inside CardHeader to place a button aligned to the top-right corner.

Meta footer

Design System

Updated 2 hours ago

Attribution row at the bottom of a card - icon, primary text, optional secondary, optional action.

Jane DoeProduct Designer

Usage

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
  CardMeta,
  Button,
} from "@patchui/react";
 
// Basic card with header, content, and footer
<Card>
  <CardHeader>
    <CardTitle>Project Settings</CardTitle>
    <CardDescription>Manage your configuration.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your content here.</p>
  </CardContent>
  <CardFooter>
    <Button size="sm">Save</Button>
  </CardFooter>
</Card>
 
// With a header action
<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>3 unread messages.</CardDescription>
    <CardAction>
      <Button variant="secondary" size="sm">Mark all read</Button>
    </CardAction>
  </CardHeader>
</Card>
 
// Interactive variant (hover effect)
<Card variant="interactive">
  <CardContent>Hover me</CardContent>
</Card>
 
// With meta footer (person attribution)
<Card>
  <CardHeader>
    <CardTitle>Senior Engineer</CardTitle>
    <CardDescription>Platform team · Remote</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Referred by a team member.</p>
  </CardContent>
  <CardMeta
    icon={<span className="inline-flex size-7 items-center justify-center rounded-[var(--radius-patch-sm)] bg-patch-surface-hover text-[11px] font-semibold text-patch-text-secondary">JD</span>}
    primary="Jane Doe"
    secondary="Staff Engineer"
    action={<Button size="sm">Apply</Button>}
  />
</Card>

Props

Prop	Type	Default	Description
variant	"default" \| "elevated" \| "interactive" \| "ghost"	"default"	The visual style of the card.
render	RenderProp<'div'>	-	Polymorphic render prop - pass a different element to change the rendered tag.
className	string	-	Additional CSS classes to apply.
children	ReactNode	-	The card content - typically composed of CardHeader, CardContent, and CardFooter.

Notes

Compound component: Card is built from composable sub-components: CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter. Use them in any combination.
CardAction: Place CardAction inside CardHeader to render an action button in the top-right corner. The header uses CSS grid to position it automatically.
Polymorphic: Card and all sub-components accept a render prop (via Base UI's useRender) to change the rendered element. For example, render={<a href="/detail" />} renders the card as a link.
Interactive variant: Use variant="interactive" for clickable cards - it adds hover and press feedback.
CardMeta: A layout primitive for a footer attribution row - an icon, primary and optional secondary text, and an optional trailing action. Renders a hairline border-top automatically. Works for person attribution (avatar + name + role), system attribution (brand mark + source + timestamp), or any similar pattern. primary and secondary accept any ReactNode.