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

Installation

$pnpm add @refraction-ui/react-card

Usage

tsx

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

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

Props

Prop	Type	Default	Description
`className`	`string`	--	Additional CSS classes for the card container.
`children`	`ReactNode`	--	CardHeader, CardContent, CardFooter compound components.