Card

A container component for grouping related content with header, body, and footer sections.

Import

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

Usage Guidelines

When to use

To visually group related content such as a settings section, a data summary, or a profile block.
When content has a clear title, body, and optional actions (header/content/footer pattern).
For dashboard widgets or feature highlights that benefit from a bordered, elevated container.

When NOT to use

As a clickable target — place a Button or link inside the card instead of making the entire card clickable.
For modal or overlay content — use Dialog or Sheet instead.
For simple text grouping that doesn't need visual separation — a plain div with spacing is sufficient.

Preview

Card Title

This is a card component from the Retents Design System. It supports headers, content, descriptions, and footers.

Structure

Cards are composed of multiple sub-components:

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>
    <CardDescription>Description or body content goes here.</CardDescription>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Sub-components

Component	Description
`Card`	Root container with rounded corners and card background
`CardHeader`	Top section for title and metadata
`CardTitle`	Heading element (renders as `h3`)
`CardDescription`	Description area within the content
`CardContent`	Main content area with border and subtle shadow
`CardFooter`	Bottom section for actions, right-aligned