Card

InstallationCopy Anchor Link

{
  "registries": {
    "@rabtx": "http://localhost:3002/r/{name}.json"
  }
}

npx shadcn@latest add @rabtx/card

npx shadcn@latest add http://localhost:3002/r/card.json

UsageCopy Anchor Link

Installed from the registry, import from @/components/ui/card; inside this monorepo, from @rabtx/ui/card.

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@rabtx/ui/card";

export function Invite() {
  return (
    <Card>
      <CardHeader>
        <CardTitle as="h3">Invite your team</CardTitle>
        <CardDescription>Teammates can view and edit every project.</CardDescription>
        <CardAction>
          <Button variant="ghost" size="sm">Later</Button>
        </CardAction>
      </CardHeader>
      <CardContent>…</CardContent>
      <CardFooter>
        <Button size="sm">Send invites</Button>
      </CardFooter>
    </Card>
  );
}

The parts are shadcn's, with the same data-slot names, so a shadcn card drops in. Each part pads itself on the inline axis, so any of them can be left out. CardAction pins to the top right of the header; the header is a container, and under 15rem wide the action drops below the title.

MediaCopy Anchor Link

An img, video, picture or anything with data-slot="card-media" placed directly in the card runs edge to edge and takes the card's corners when it is first or last.

Link cardCopy Anchor Link

A card never takes focus itself. Put cardParts.target on the one link or button that owns it: the target's hit area stretches over the card, and the card answers hover (a stronger edge), press (a spring down to 0.985) and keyboard focus (the ring is drawn on the card), all through :has(). Other links and buttons in the card stay on top and keep working.

<Card as="article">
  <CardHeader>
    <CardTitle as="h3">
      <a href="/repos/ui" className={cardParts.target}>rabtx/ui</a>
    </CardTitle>
  </CardHeader>
</Card>

SelectableCopy Anchor Link

Make the target a label around a radio or checkbox. A click anywhere on the card picks it, and the checked input marks the card selected with a --primary edge. A disabled input dims the card and turns off its hover and press. data-selected, aria-pressed="true" or aria-current on the target select it too.

TiltCopy Anchor Link

TiltCard leans toward a mouse or pen in 3D, up to max degrees at a corner (default 10), with a soft glare under the pointer, and springs back flat when the pointer leaves. Touch, reduced motion and data-motion="off" keep it flat.

SpotlightCopy Anchor Link

SpotlightCard carries a soft light after the pointer and lights the part of the edge nearest to it. The light is --primary, so one token recolors a card. When a link or button inside has keyboard focus, the light rests along the top.

ExpandableCopy Anchor Link

ExpandableCard is a <details> element: the summary row is the toggle, so the browser provides the button role, the expanded state, Enter and Space, and opening for find-in-page. A shared name keeps one card of a group open, natively. The content grows to its height on the panel spring and the chevron turns over.

StackCopy Anchor Link

CardStack piles its cards behind the first, each a little smaller, and spreads them into a list. The toggle is a real button with aria-expanded; while collapsed its hit area covers the pile, so a click or tap anywhere opens it. A mouse over the pile fans the peeks a little further. Cards of similar height stack best.

APICopy Anchor Link

Every part takes everything its native element takes. Card adds:

CardTitle takes as (div, h2 to h6); CardDescription is a p (or div); CardHeader and CardFooter can render header and footer, which is right inside an article or section card. TiltCard and SpotlightCard take the Card props, and TiltCard adds:

ExpandableCard takes everything a <details> takes, plus:

CardStack takes everything a <section> takes, plus:

Outside React, cardClass() and cardParts from @rabtx/ui/card/styles give the class names:

<article class="rx-surface rx-card">
  <div class="rx-card-header">
    <h3 class="rx-card-title"><a class="rx-card-target" href="/a">Title</a></h3>
    <p class="rx-card-description">Description</p>
  </div>
</article>

ThemingCopy Anchor Link

The Card reads only the theme tokens.

How the motion worksCopy Anchor Link

JavaScript only writes the pointer position and the expanded state. The springs are fixed linear() curves: a tilt that is interrupted restarts from where it is.

Browser supportCopy Anchor Link

• Chromium 131+: everything, including the expanding details and stack heights.
• Safari and Firefox: cards, link and selectable cards, tilt and spotlight work; without interpolate-size and ::details-content the expandable card and the stack change height at once instead of animating.

AccessibilityCopy Anchor Link

• A card adds no role and no tab stop. Use as="article" or a labelled section where the card is a unit of its own, and CardTitle as for the right heading level.
• A clickable card is a real link, button or label inside it, so its name, role and keyboard come from that element. Name a link by its text, not "Read more".
• ExpandableCard is native details and summary. The stack's toggle is a button with aria-expanded and aria-controls, and the cards behind are inert while collapsed.
• Tilt and spotlight are decoration: they ignore touch, and reduced motion or data-motion="off" keeps the card flat and drops every fade and height animation.