Card

A flexible surface container for grouping related content. Composed of six sub-components — Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter — that can be used together or independently.

✓Six composable sub-components
✓Uses bg-card and border-border tokens — adapts automatically to light/dark mode
✓Subtle shadow-sm by default
✓Fully custom layout — add, remove, or reorder any sub-component

Account Plan

You are on the Pro plan.

12 of 50 seats used · renews Jan 1, 2027

import { Card }from "@aetherstack/ui"

card.tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

<Card>
  <CardHeader>
    <CardTitle>Account Plan</CardTitle>
    <CardDescription>You are on the Pro plan.</CardDescription>
  </CardHeader>
  <CardContent className="text-sm text-muted-foreground">
    12 of 50 seats used · renews Jan 1, 2027
  </CardContent>
  <CardFooter className="gap-2">
    <Button size="sm">Manage</Button>
    <Button size="sm" variant="ghost">View usage</Button>
  </CardFooter>
</Card>

Usage

Metric card

Display a key metric with a label and supporting data.

Total revenue

$12,400

+8.2% from last month

Active users

3,280

+4.1% from last month

Content-only card

CardContent alone for simple content containers.

This is a simple content-only card. Use it for notices, inline notes, or any content that needs a visual container without a formal header.

With badge in header

Combine CardTitle with a Badge for a labelled header.

API Access

Pro

Manage your API keys and permissions.

2 active keys · last used 3 hours ago

Horizontal layout

Override the default layout for horizontal cards.

Alice Chen

alice@example.com

Admin

Props

Prop	Type	Default	Description

Card

Prop	Type	Default	Description
className	string	—	Additional classes on the outer container div.
...props	React.HTMLAttributes<HTMLDivElement>	—	All standard HTML div attributes.

CardHeader

Prop	Type	Default	Description
className	string	—	Defaults to flex flex-col space-y-1.5 p-6.
...props	React.HTMLAttributes<HTMLDivElement>	—	All standard HTML div attributes.

CardTitle

Prop	Type	Default	Description
className	string	—	Defaults to text-2xl font-semibold leading-none tracking-tight.
...props	React.HTMLAttributes<HTMLHeadingElement>	—	Renders as h3.

CardDescription

Prop	Type	Default	Description
className	string	—	Defaults to text-sm text-muted-foreground.
...props	React.HTMLAttributes<HTMLParagraphElement>	—	All standard HTML paragraph attributes.

CardContent

Prop	Type	Default	Description
className	string	—	Defaults to p-6 pt-0.
...props	React.HTMLAttributes<HTMLDivElement>	—	All standard HTML div attributes.

CardFooter

Prop	Type	Default	Description
className	string	—	Defaults to flex items-center p-6 pt-0.
...props	React.HTMLAttributes<HTMLDivElement>	—	All standard HTML div attributes.

* Required props

Accessibility

→Card is a presentational container — it has no implicit ARIA role.
→CardTitle renders as an h3 heading. Ensure your heading hierarchy is correct in context.
→For interactive cards (clickable as a whole), wrap in a button or anchor and ensure keyboard focus is managed correctly.