@edux-design/cards

Composable card surface primitives (Card, CardHeader, CardBody, CardFooter) that respect the Edux spacing, border, and shadow tokens. Use them to wrap forms, summaries, or dashboards without re-implementing the skeleton every time.

Installation

pnpm add @edux-design/cards @edux-design/utils @edux-design/buttons @edux-design/icons
# or
npm install @edux-design/cards @edux-design/utils @edux-design/buttons @edux-design/icons

Peer deps: react@^19.1.0, react-dom@^19.1.0.

Usage

import { Card, CardHeader, CardBody, CardFooter } from "@edux-design/cards";
import { Button } from "@edux-design/buttons";

export function ProfileCard({ onClose }) {
  return (
    <Card className="max-w-lg">
      <CardHeader title="Profile" onClose={onClose} />
      <CardBody>
        <p className="text-fg-subtle">Keep your information up to date.</p>
      </CardBody>
      <CardFooter>
        <Button isSecondary>Cancel</Button>
        <Button>Save changes</Button>
      </CardFooter>
    </Card>
  );
}

Components

| Component | Purpose | | -------------- | --------------------------------------------------------------------------------------- | | Card | Root container; adds rounded corners, base border, and shadow. | | CardHeader | Optional header with title slot + built-in close button (uses IconButton). | | CardBody | Flexible body wrapper with standard padding. | | CardFooter | Right-aligned action row for buttons/links. |

Each sub-component accepts className so you can tweak spacing without losing the defaults.

Development

pnpm --filter @edux-design/cards lint
pnpm --filter @edux-design/cards check-types
pnpm --filter @edux-design/cards build

Stories live in src/demos/Card.stories.jsx; update them whenever you add new states (loading, error banners, etc.).

Notes

• CardHeader accepts children – if you pass custom header markup, the default title/close pairing is skipped.
• CardFooter is unopinionated about layout; add justify-between, responsive stacks, etc., via className.
• If you need media slots or illustration headers, consider adding dedicated components (e.g., CardMedia) and referencing them here.