Card

A bordered container for grouping related content into distinct sections with optional header, body, and footer areas.

Basic Card

Project Update

Latest status on the design system rollout.

All core components have been implemented and tested. The team is now focused on documentation and integration guides for consuming applications.

<Card>
  <CardHeader>
    <CardTitle>Project Update</CardTitle>
    <CardDescription>Latest status on the design system rollout.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>All core components have been implemented and tested. The team is now focused on documentation and integration guides for consuming applications.</p>
  </CardContent>
  <CardFooter>
    <Button>View Details</Button>
  </CardFooter>
</Card>

Interactive Card

Analytics

View traffic and engagement.

12,340

visits this month

Revenue

Monthly revenue summary.

$8,420

up 12% from last month

<Card interactive>
  <CardHeader>
    <CardTitle>Clickable Card</CardTitle>
    <CardDescription>This card has hover and active states.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Use the interactive prop to add cursor, border, and shadow transitions on hover, plus a subtle press effect on click.</p>
  </CardContent>
</Card>

Card with Form

Create Account

Enter your details to get started.

Name

<Card>
  <CardHeader>
    <CardTitle>Create Account</CardTitle>
    <CardDescription>Enter your details to get started.</CardDescription>
  </CardHeader>
  <CardContent>
    <Stack gap="md">
      <Field>
        <FieldLabel>Name</FieldLabel>
        <Input placeholder="Your full name" />
      </Field>
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type="email" placeholder="you@example.com" />
      </Field>
    </Stack>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Sign Up</Button>
  </CardFooter>
</Card>

API Reference

Card

Prop	Type	Default	Description
`interactive`	`boolean`	`false`	Adds hover border highlight, shadow lift, and active press effect.
`className`	`string`	—	Additional CSS classes to apply to the card.
`children`	`React.ReactNode`	—	Card content, typically CardHeader, CardContent, and CardFooter.

CardHeader

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the header section.
`children`	`React.ReactNode`	—	Header content, typically CardTitle and CardDescription.

CardTitle

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the title.
`children`	`React.ReactNode`	—	Title text content.

CardDescription

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the description.
`children`	`React.ReactNode`	—	Description text content.

CardContent

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the content area.
`children`	`React.ReactNode`	—	Main body content of the card.

CardFooter

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the footer.
`children`	`React.ReactNode`	—	Footer content, typically action buttons.