Cards

Usage and anatomy

Card groups related content into a bordered surface. Use <Card.Root /> as the container, <Card.Header /> for the title and description, and <Card.Content /> for the main content.

import * as Card from "@acme/ui/card"

<Card.Root>
  <Card.Header>
    <Card.Title>Account settings</Card.Title>
    <Card.Description>Manage your profile and preferences.</Card.Description>
  </Card.Header>
  <Card.Content>
    <Card.Row>
      <Card.RowHeader>
        <Card.RowLegend>Profile</Card.RowLegend>
        <Card.RowDescription>Update your public information.</Card.RowDescription>
      </Card.RowHeader>
      <Card.RowBody>{/* Form controls */}</Card.RowBody>
    </Card.Row>
  </Card.Content>
</Card.Root>

• Use rows when a settings card needs repeated label-and-control sections.
• Keep Card.Title concise and use Card.Description for supporting context.
• Use semantic form controls inside Card.RowBody rather than making the entire card interactive.

API reference

Card parts

Card.Row can be composed with Card.RowHeader, Card.RowLegend, Card.RowDescription, and Card.RowBody. Every part accepts the native props for its rendered HTML element.