Components

Card

A quiet surface that groups related content: a hairline border, an 8px radius and no shadow. Compose a header, content and footer inside.

Usage

Use it for:

  • Grouping a metric, a chart or a short list on a dashboard.
  • A grid of entries that each open one thing (project, account).

Avoid it when:

  • The content is the whole page: use the page layout instead.
  • You would nest a card in a card: use a Divider or spacing.
  • The card would hold several actions and also be clickable.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Basic

October budget
Household · resets Nov 1
Spent

Header action

Card.Header action puts a control at the right of the title; it wraps under the title when the card is narrow.

Recent payments

Last 7 days
3 payments, $1,204.50 in total

Interactive (link card)

With interactive and asChild the whole card is one link: hover wash, pressed state and a focus ring. Keep other links and buttons out of it.

API Reference

Card.Root

A <div> (or its child with asChild); all <div> props are forwarded.

PropTypeDefault
interactive
boolean
false
asChild
boolean
false
className
string

Card.Header / Title / Description / Content / Footer

Layout parts (<div> by default). Footer has a top hairline; Title is 16px semibold.

PropTypeDefault
action
ReactNode
asChild
boolean
false
className
string

Accessibility

Keyboard:

  • Tab: focuses an interactive card (it is the link or button itself).

ARIA and semantics:

  • A plain card has no role; give its title a heading element with asChild when it starts a section.
  • An interactive card must wrap exactly one link or button and contain no other interactive elements (no nested controls).
  • The focus ring uses Motion’s focus shadow; it is visible in both themes.
© 2026 Motion. Internal documentation.