Hex UIv1

Card

A container component with header, content, and footer sections. Includes subtle shadow and hover effects.

Full (header · content · footer)

Create project

Deploy your new project in one click.

Configure your project settings and deploy instantly.

Metric

Total revenue

$45,231.89

+20.1% from last month

Subscribers

+2,350

+180 this week

Active now

573

+12 since last hour

User card (Avatar + Badge)

OC

Oscar Corona

Pro

Staff engineer · Remote

Installation

pnpm
pnpm dlx @hex-core/cli add card

Metric card

KPI tile with label, large value, and a trend delta

tsx
<Card>
  <CardHeader className="pb-2">
    <p className="text-sm font-medium text-muted-foreground">Monthly recurring revenue</p>
  </CardHeader>
  <CardContent>
    <div className="flex items-baseline gap-2">
      <span className="text-3xl font-semibold tracking-tight">$48,219</span>
      <span className="text-sm font-medium text-emerald-600">+12.4%</span>
    </div>
    <p className="mt-1 text-xs text-muted-foreground">vs. previous 30 days</p>
  </CardContent>
</Card>

Card with media

Product card with a top image area, body copy, and footer actions

tsx
<Card className="overflow-hidden">
  <div className="aspect-video w-full bg-muted" aria-hidden="true" />
  <CardHeader>
    <CardTitle>Aurora desk lamp</CardTitle>
    <CardDescription>Dimmable warm-white LED with a brushed-aluminum stem.</CardDescription>
  </CardHeader>
  <CardFooter className="justify-between">
    <span className="text-lg font-semibold">$129</span>
    <div className="flex gap-2">
      <Button variant="outline">Details</Button>
      <Button>Add to cart</Button>
    </div>
  </CardFooter>
</Card>

API Reference

PropTypeDefaultDescription
className
string—Additional CSS classes on the root card

AI Guidance

When to use

Use to group related content with a visual boundary: settings panels, product listings, dashboard widgets, form sections.

When not to use

Don't use for full-page layouts (use plain divs). Don't nest cards inside cards.

Common mistakes

  • Nesting cards
  • Using Card when a simple div with border would suffice
  • Forgetting CardContent padding when placing forms inside

Accessibility

Card is a div by default. Add role='region' and aria-label for landmark cards. CardTitle renders h3 — ensure heading hierarchy.

Related components

Token budget: 400

Verified against @hex-core/components@1.12.0

Edit this page on GitHub