docs / core / card

Card

the base surface, composed not configured. header, body and footer are regions you fill, so a card is whatever you assemble in them. one surface word sets its weight, from elevated to a bare outline, and StatCard, Panel and Dialog all speak it.

intensity · recedesrsc · server

provenance

shaped from personal-website · sisu-plus

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

holds Button, Badge, StatCard content, forms, anything groupedGlowCard swaps in for the single card that earns the pointer glownever a card inside a card. nest with Panel or plain spacinginteractive without an actual click target is a lie

a11y

CardTitle is a real <h3> · the glow layer is aria-hiddenjest-axe

dependencies

Badge from the same package
live demo · try it out

Deployment

Production build

live

Shipped 4 minutes ago.

customize
surfacehow the card sits on the page
highlightaccent wash, edge, or full ring
interactivelifts on hover for clickable cards
row (CardHeader)icon + title + actions inline
usagecopy
import { Card, CardActions, CardBadge, CardBody, CardEyebrow, CardFooter, CardHeader, CardIcon, CardTitle } from "@usva-ui/react/primitives/card";

<Card interactive>
  <CardHeader row>
    <CardIcon><BoltIcon /></CardIcon>
    <div className="flex flex-col gap-1">
      <CardEyebrow>Deployment</CardEyebrow>
      <CardTitle>Production build</CardTitle>
    </div>
    <CardActions>
      <CardBadge tone="success">live</CardBadge>
    </CardActions>
  </CardHeader>
  <CardBody>Shipped 4 minutes ago.</CardBody>
  <CardFooter>
    <Button size="sm" variant="outline">View logs</Button>
  </CardFooter>
</Card>
highlights

highlight = "wash"

pick a highlight

a radial accent wash bleeds atmosphere across the surface.

surfaceshared with StatCard · Panel · Dialog

surface = "elevated"

pick a surface

the default. lit-from-above fill, a rim light and a floating shadow.

props

proptypedefaultnotes
surface"elevated" | "flat" | "glass" | "outline""elevated"how the card sits on the page. the same vocabulary drives StatCard, Panel and Dialog. glass is a rare, purposeful choice, never a default.
highlight"none" | "wash" | "edge" | "ring""none"accent treatment: a radial wash, a top edge hairline, or a full glow ring. ring replaces the elevation shadow.
interactivebooleanfalselifts on hover. only for cards that are actually clickable.
row (CardHeader)booleanfalselays the header out as icon + title + actions instead of stacked.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Card, CardActions, CardBadge, CardBody, CardEyebrow, CardFooter, CardHeader, CardIcon, CardTitle } from "@usva-ui/react/primitives/card";

<Card interactive>
  <CardHeader row>
    <CardIcon><BoltIcon /></CardIcon>
    <div className="flex flex-col gap-1">
      <CardEyebrow>Deployment</CardEyebrow>
      <CardTitle>Production build</CardTitle>
    </div>
    <CardActions>
      <CardBadge tone="success">live</CardBadge>
    </CardActions>
  </CardHeader>
  <CardBody>Shipped 4 minutes ago.</CardBody>
  <CardFooter>
    <Button size="sm" variant="outline">View logs</Button>
  </CardFooter>
</Card>