Component

Card

A rounded surface composed from Card.Header, Card.Body and Card.Footer. Pass onClick to make the whole card tappable.

Order #1024

Paid

Two items · RM 38.00

Delivered Jun 23

Dark card

Inverted surface variant.

jsx

<Card>
  <Card.Header
    title="Order #1024"
    trailing={<Badge label="Paid" variant="green" />}
  />
  <Card.Body>Two items · RM 38.00</Card.Body>
  <Card.Footer>
    <Badge label="Delivered" variant="green" />
    <span className="text-xs text-neutral-400 ml-auto">Jun 23</span>
  </Card.Footer>
</Card>

<Card variant="dark">
  <Card.Header title="Dark card" />
  <Card.Body>Inverted surface variant.</Card.Body>
</Card>

Card props

Prop	Type	Default	Description
`variant`	'default' \	'dark' \	'ghost'`
`onClick`	() => void	—	When set, the card renders as a button.
`className`	string	''	Extra classes.
`children`	ReactNode	—	Header / Body / Footer slots.

Card.Header props

Prop	Type	Default	Description
`title`	string	—	Header title text.
`image`	string	—	Optional full-width image URL above the title.
`leading`	ReactNode	—	Content before the title (e.g. an avatar).
`trailing`	ReactNode	—	Content after the title (e.g. a badge or chevron).