Card

A surface that groups related content. Header and footer are optional and draw their own dividers — a Card holding only a CardBody is just a padded box.

src/components/ui/card.tsx

About

From the component's own source, where it was written.

A surface that groups related content, split into three optional sections.

Header and footer draw their own dividers; a Card holding only a CardBody is just a padded box, with no stray rules. The Card's size reaches its sections through context, so <Card size="lg"> re-pads all of them and a section can still override its own.

Install

npx astralyx-ui add card

Usage

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardBody,
  CardFooter,
} from '@/components/ui/card'

<Card>
  <CardHeader>
    <CardTitle>Deployment</CardTitle>
    <CardDescription>Last run 4 minutes ago.</CardDescription>
  </CardHeader>
  <CardBody>Build 1482 finished on main.</CardBody>
  <CardFooter>
    <Button size="sm">Re-run</Button>
  </CardFooter>
</Card>

Composer

Change the props and the source below follows.

Deployment

Last run 4 minutes ago.

Build 1482 finished on main.

Props

variant

size

CardHeaderCardFooter

tsx

<Card>
  <CardHeader>
    <CardTitle>Deployment</CardTitle>
    <CardDescription>Last run 4 minutes ago.</CardDescription>
  </CardHeader>
  <CardBody>Build 1482 finished on main.</CardBody>
  <CardFooter>
    <Button size="sm">Re-run</Button>
  </CardFooter>
</Card>

Examples

Body only

tsx

<Card>
  <CardBody>Nothing but content — no dividers.</CardBody>
</Card>

Full composition

tsx

<Card>
  <CardHeader>
    <CardTitle>Deployment</CardTitle>
    <CardDescription>Last run 4 minutes ago.</CardDescription>
  </CardHeader>
  <CardBody>Build 1482 finished on main.</CardBody>
  <CardFooter>
    <Button size="sm">Re-run</Button>
  </CardFooter>
</Card>

Variants

tsx

<Card variant="default" />
<Card variant="secondary" />
<Card variant="ghost" />

Sizes

tsx

<Card size="sm">…</Card>
<Card size="default">…</Card>
<Card size="lg">…</Card>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Card`

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
variant	'default' \| 'secondary' \| 'ghost'	'default'	Bordered surface, filled, or outline with no fill.
size	CardSize	'default'	Section padding. Reaches header, body and footer through context, so one prop re-pads the whole card.

`CardHeader`

Optional. Each draws its own divider, so omitting them leaves no stray rule.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
size	CardSize	'default'	Overrides the inherited padding for one section.
action	ReactNode	—	Controls beside the title. When the two cannot share a line — a phone, a row of several buttons — the controls wrap under the title instead of crushing it or running off the card.

`CardTitle`

Heading and secondary line, normally inside CardHeader.

Extends ComponentProps<'h3'>.

Prop	Type	Default	Description
as	'h2' \| 'h3' \| 'h4' \| 'div'	'h3'	—

`CardDescription`

Heading and secondary line, normally inside CardHeader.

Extends ComponentProps<'p'>.

`CardBody`

Grows to fill. The only section a Card needs.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
size	CardSize	'default'	Overrides the inherited padding for one section.

`CardFooter`

Optional. Each draws its own divider, so omitting them leaves no stray rule.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
size	CardSize	'default'	Overrides the inherited padding for one section.

Functions

Function	Signature	Description
cardVariants	(props?: { variant?: 'default' \| 'secondary' \| 'ghost' }) => string	—

Types

Type	Definition	Description
`CardSize`	keyof typeof cardPadding	A surface that groups related content, split into three optional sections.