Board Card

Install

pnpm dlx shadcn@latest add @vegastack/board-card

Usage

import { BoardCard } from "@/components/ui/board-card";

<Board
  columns={lanes}
  getItemId={(task) => task.id}
  getItemLabel={(task) => task.title}
  renderCard={(task) => (
    <BoardCard
      surface={false}
      title={task.title}
      context={`${task.project} · ${task.customer}`}
      done={task.done}
      onDoneChange={(done) => api.setDone(task.id, done)}
      due={task.dueAt}
      dateOptions={{ timeZone }}
      priority={task.priority}
      assignee={{ name: task.owner.name, image: task.owner.avatarUrl }}
    />
  )}
  onMove={move}
/>;

BoardCard is the content of one card on a Board lane: a round completion tick (or your status circle, through status) in a fixed leading column, then — all in one text column beside it — a title of up to two lines, one muted context line ("project · customer"), and a bottom row with the assignee's avatar first, then the due chip, then the priority chip. DataList's board view renders one per row (its boardCard prop maps a row to these fields).

On a Board, pass surface={false}: the board owns the card's border, hover tint, focus cue, drag and ⋯ menu. Every card ⋯ — the board's, a standalone card's actions, a MediaCard's — sits top-aligned with the title's first line. On its own, the card draws 12px padding, a subtle border and a hover tint.

Examples

Due dates

The due chip reads the system date helpers (formatDueLabel), so a card and a list row agree: destructive when overdue ("Overdue 2d"), warning when due today, quiet otherwise. Pass dateOptions={{ timeZone }} so the server and the browser agree on "today".

Priority

Urgent is destructive and High is warning; Medium and Low are quiet outline chips. priorityLabel renames the chip.

Done

done fills the round tick and strikes the title; the due chip stops warning. onDoneChange makes the tick a control — without it the tick is read-only.

Status circle

status puts your status control in the tick's place — the same Status menu your list rows use (a StatusIcon trigger: click opens the menu with O/P/B/D/C, Alt-click marks it done). It sits above the card's activator on a Board, so a click edits the status without opening the card.

<BoardCard
  surface={false}
  title={task.title}
  done={task.status === "done"}
  status={
    <TaskStatusMenu
      status={task.status}
      onChange={(to) => setStatus(task, to)}
    />
  }
/>

Minimal and linked

Every slot but the title is optional. Standalone, href (with your router's linkRender) makes the title a link stretched over the card; on a Board, use the board's getItemHref instead.

API Reference

Accessibility

• The done tick is a real checkbox named "Mark done" (doneLabel). On a Board it sits above the card's activator, so it is clickable without opening or dragging the card.
• A status control brings its own name (for example "Status: Open — change status of …").
• The avatar is named by the assignee (its initials are hidden from screen readers).
• There is no focus ring: the system's focus cue is the background tint (FOC-13).
• The ⋯ slot shows on hover and on keyboard focus, and always on a touch screen.

Do / Don't