Component

Card

A container with header, content, and footer sections. Compound component with CardTitle and CardDescription. Uses the headless @refraction-ui/card core.

Examples

Cards with header, content, and footer sections.

Card Title

A brief description of the card content.

This is the main content area. It can contain text, images, or any other React nodes.

Notifications

You have 3 unread messages.

New deployment started

Build completed successfully

Review requested

Tones

subtle uses the subtle surface token; tertiary is a tinted second-accent card. Both were added in issue #485.

Default

Standard card surface.

Subtle

Lower-emphasis surface token.

Tertiary

Tinted second-accent card.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@refraction-ui/react'

export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Title</CardTitle>
        <CardDescription>Description text</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Main content area</p>
      </CardContent>
      <CardFooter>
        <button>Action</button>
      </CardFooter>
    </Card>
  )
}

// Clickable card: <Card asChild><a href="/settings">…</a></Card>

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'subtle' \| 'tertiary'`	`'default'`	Visual tone: subtle surface or tinted second-accent card (issue #485).
`padding`	`'none' \| 'default' \| 'compact'`	`'none'`	Built-in inner padding (p-6 / p-4). Leave as none when composing CardHeader/CardContent/CardFooter, which carry their own padding.
`CardTitle as`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	`'h3'`	Heading level of CardTitle, to fit the page outline.
`className`	`string`	--	Additional CSS classes for the card container.
`children`	`ReactNode`	--	CardHeader, CardContent, CardFooter compound components.
`asChild`	`boolean`	`false`	Render as child element (e.g. wrap an <a> tag for a clickable card).