Card

A compound layout component for displaying grouped content. Built with plain HTML elements (no Base UI dependency). Follows the compound pattern: Card.Root, Card.Header, Card.Title, Card.Description, Card.Content, Card.Footer.

Import

import { Card } from "chunks-ui";

Basic Usage

<Card.Root>
  <Card.Header>
    <Card.Title>Project Alpha</Card.Title>
    <Card.Description>A brief description of the project.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Main content goes here.</p>
  </Card.Content>
  <Card.Footer>
    <Button variant="outlined" color="secondary">Cancel</Button>
    <Button>Save</Button>
  </Card.Footer>
</Card.Root>

Minimal Card

You can use any subset of compound parts. Each one gets the same padding from the edges of the card:

<Card.Root>
  <Card.Content>
    <p>Simple card with content only.</p>
  </Card.Content>
</Card.Root>

With Custom Content

<Card.Root className="max-w-sm">
  <Card.Header>
    <Card.Title>Team Members</Card.Title>
    <Card.Description>Manage your team members and roles.</Card.Description>
  </Card.Header>
  <Card.Content>
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <Avatar fallback="AJ" size={32} />
        <div>
          <p className="text-sm font-medium">Alice Johnson</p>
          <p className="text-xs text-muted-foreground">Admin</p>
        </div>
      </div>
      <div className="flex items-center gap-3">
        <Avatar fallback="BS" size={32} />
        <div>
          <p className="text-sm font-medium">Bob Smith</p>
          <p className="text-xs text-muted-foreground">Member</p>
        </div>
      </div>
    </div>
  </Card.Content>
  <Card.Footer>
    <Button>Invite Member</Button>
  </Card.Footer>
</Card.Root>

Styling

• No shadow. Card.Root has a border and a background, and no shadow. To add one, pass a class: <Card.Root className="shadow-md">.
• Spacing comes from the root. Card.Root is a flex column with py-6 and gap-6. Card.Header, Card.Content and Card.Footer have only px-6. So the content of any subset of parts is 24px from every edge, with 24px between parts (6 spacing units at the default --spacing).
• Dividers. A Card.Header with border-b gets pb-6, and a Card.Footer with border-t gets pt-6, so the border sits 24px from the text. To change that padding, use the same variant, for example [.border-b]:pb-4. A plain pb-4 loses to it. Only the exact border-b and border-t classes trigger this; with border-b-2, border-y or border, add the padding yourself.
• Upgrading. A card that starts with Card.Header looks the same as before. Every child of the root is now a flex item, and padding on the parts or space-y-* on the root adds to the root’s py-6 and gap-6. The changelog lists each case.

To change the spacing, set the vertical padding and the gap on the root, and the horizontal padding on the parts:

<Card.Root className="gap-4 py-4">
  <Card.Content className="px-4">
    <p>Tighter card.</p>
  </Card.Content>
</Card.Root>

Compound Parts

Props

All compound parts accept standard HTML div props (or h3/p for Title/Description) plus className for additional styling. There are no component-specific variant props.