ComponentServer-safe

Card

A composable content container with header, body and footer regions.

Installation

Preview

Project created
Your new workspace is ready.
Updated just now

Usage

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

export function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Project created</CardTitle>
        <CardDescription>Your new workspace is ready.</CardDescription>
      </CardHeader>
      <CardContent>Start adding components.</CardContent>
      <CardFooter>Updated just now</CardFooter>
    </Card>
  )
}

API reference

PropTypeDefaultDescription
CardReact.ComponentProps<"div">The root content container.
CardHeaderReact.ComponentProps<"div">Groups title and description.
CardContentReact.ComponentProps<"div">Primary card content.
CardFooterReact.ComponentProps<"div">Actions or supporting metadata.