TaskBoard

Horizontal status columns for the Tasks board view. Pair with TaskDnd for drag targets and TaskCard for items.

Preview#

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#139

Verify a deliberately long task title wraps to three lines without pushing the status control outside the card

The description also wraps and clamps so dense board columns remain scannable at the source width.

#151

Tighten board column header density

Keep badge, count, and chevron aligned under dense status labels.

#150

Show overflow when a column exceeds the viewport

ScrollArea must own vertical overflow for tall status stacks.

#149

Preserve drop placeholders while cards are dragging

#148

Clamp long descriptions inside board cards

Two lines max so columns stay scannable at the source width.

#147

Keep status icon and label paired in task badges

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

#126LEGACY

Retire the legacy task inspector

#146

Verify horizontal scroll across five status columns

Board root stays min-content wide inside one shared viewport.

#145

Wire collapse state without remounting cards

#144

Announce blocked drops for closed columns

Empty blocked copy should stay visible while dragging.

#143

Sync board counts after keyboard reorders

#121

Review task filter empty states

Compare empty, filtered empty, loading, and failure structures.

#118

Document the consumer-owned workflow boundary

#113

Ship source-faithful status badges

#104

Remove the retired board prototype

Anatomy#

import {
  TaskBoardColumn,
  TaskBoardColumnBadge,
  TaskBoardColumnChevron,
  TaskBoardColumnCount,
  TaskBoardColumnEmpty,
  TaskBoardColumnEmptyAllowed,
  TaskBoardColumnEmptyBlocked,
  TaskBoardColumnEmptyIdle,
  TaskBoardColumnHeading,
  TaskBoardColumnItems,
  TaskBoardColumnPanel,
  TaskBoardColumnTrigger,
  TaskBoardRoot,
  TaskCard,
  TaskDndProvider,
  TaskDragOverlay,
  TaskDraggable,
  TaskDropPlaceholder,
  TaskDropZone,
} from "raft-ui";

<TaskDndProvider isDropAllowed={() => true} onMove={() => {}}>
  <TaskBoardRoot>
    <TaskBoardColumn
      render={<TaskDropZone id="task-status:todo" data={{ status: "todo" }} />}
    >
      <TaskBoardColumnTrigger>
        <TaskBoardColumnHeading>
          <TaskBoardColumnBadge status="todo" />
          <TaskBoardColumnCount />
        </TaskBoardColumnHeading>
        <TaskBoardColumnChevron />
      </TaskBoardColumnTrigger>
      <TaskBoardColumnPanel>
        <TaskBoardColumnItems>
          <TaskBoardColumnEmpty>
            <TaskBoardColumnEmptyIdle />
            <TaskBoardColumnEmptyAllowed />
            <TaskBoardColumnEmptyBlocked />
          </TaskBoardColumnEmpty>
          <TaskDropPlaceholder id="task-1" placement="before" />
          <TaskDraggable
            id="task-1"
            dropId="task-1"
            dropData={{ status: "todo", taskId: "task-1" }}
          >
            <TaskCard />
          </TaskDraggable>
          <TaskDropPlaceholder id="task-1" placement="after" />
        </TaskBoardColumnItems>
      </TaskBoardColumnPanel>
    </TaskBoardColumn>
  </TaskBoardRoot>
  <TaskDragOverlay>
    <TaskCard />
  </TaskDragOverlay>
</TaskDndProvider>

Usage#

Board with drag and drop#

Wrap columns in TaskDndProvider and mount each column as a TaskDropZone. Drop policy and move handlers stay in the composition.

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#139

Verify a deliberately long task title wraps to three lines without pushing the status control outside the card

The description also wraps and clamps so dense board columns remain scannable at the source width.

#151

Tighten board column header density

Keep badge, count, and chevron aligned under dense status labels.

#150

Show overflow when a column exceeds the viewport

ScrollArea must own vertical overflow for tall status stacks.

#149

Preserve drop placeholders while cards are dragging

#148

Clamp long descriptions inside board cards

Two lines max so columns stay scannable at the source width.

#147

Keep status icon and label paired in task badges

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

#126LEGACY

Retire the legacy task inspector

#146

Verify horizontal scroll across five status columns

Board root stays min-content wide inside one shared viewport.

#145

Wire collapse state without remounting cards

#144

Announce blocked drops for closed columns

Empty blocked copy should stay visible while dragging.

#143

Sync board counts after keyboard reorders

#121

Review task filter empty states

Compare empty, filtered empty, loading, and failure structures.

#118

Document the consumer-owned workflow boundary

#113

Ship source-faithful status badges

#104

Remove the retired board prototype

Keep one ScrollAreaViewport around the whole board. The viewport owns vertical and horizontal scrolling; TaskBoardRoot keeps its natural minimum width, so columns never become independent scroll regions.

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#139

Verify a deliberately long task title wraps to three lines without pushing the status control outside the card

The description also wraps and clamps so dense board columns remain scannable at the source width.

#151

Tighten board column header density

Keep badge, count, and chevron aligned under dense status labels.

#150

Show overflow when a column exceeds the viewport

ScrollArea must own vertical overflow for tall status stacks.

#149

Preserve drop placeholders while cards are dragging

#148

Clamp long descriptions inside board cards

Two lines max so columns stay scannable at the source width.

#147

Keep status icon and label paired in task badges

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

#126LEGACY

Retire the legacy task inspector

#146

Verify horizontal scroll across five status columns

Board root stays min-content wide inside one shared viewport.

#145

Wire collapse state without remounting cards

#144

Announce blocked drops for closed columns

Empty blocked copy should stay visible while dragging.

#143

Sync board counts after keyboard reorders

#121

Review task filter empty states

Compare empty, filtered empty, loading, and failure structures.

#118

Document the consumer-owned workflow boundary

#113

Ship source-faithful status badges

#104

Remove the retired board prototype

Column empty states#

Sparse tasks leave In Review / Done / Closed empty so TaskBoardColumnEmptyIdle shows. Drag onto an empty column for Allowed / Blocked copy (Closed is not blocked in this demo — see TaskDnd).

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

No in review tasks.

No done tasks.

No closed tasks.

Virtualization#

Keep one shared ScrollAreaViewport, and mount a useVirtualizer stack inside each tall column. Only viewport rows plus overscan stay mounted — watch the counter while scrolling. Virtualization stays consumer-owned; TaskBoard does not provide it.

Mount a virtual stack when a column can grow past the shared viewport. Only visible rows plus overscan stay in the DOM.

Mounted 0 / 48

API#WIP

TaskBoardRoot#

...props

useRender.ComponentProps<"div">

Horizontal board layout root.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Horizontal board layout root.

TaskBoardColumn#

open

boolean

Controlled collapsed state for the column.

defaultOpendefault: false

boolean

Initial collapsed state for the column.

...props

Collapsible.Root.Props

Fixed-width board column root. Compose TaskDropZone via render for DnD.

Prop	Type	Default	Description
`open`	boolean	—	Controlled collapsed state for the column.
`defaultOpen`	boolean	false	Initial collapsed state for the column.
`...props`	Collapsible.Root.Props	—	Fixed-width board column root. Compose TaskDropZone via render for DnD.

TaskBoardColumnTrigger#

...props

Collapsible.Trigger.Props

Expands or collapses the board column.

Prop	Type	Default	Description
`...props`	Collapsible.Trigger.Props	—	Expands or collapses the board column.

TaskBoardColumnHeading#

...props

useRender.ComponentProps<"span">

Heading row for column badge and count.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"span">	—	Heading row for column badge and count.

TaskBoardColumnBadge#

status

"todo" | "in-progress" | "in-review" | "done" | "closed"

Task status that drives the badge surface color.

...props

useRender.ComponentProps<"span">

Column status badge.

Prop	Type	Default	Description
`status`	"todo" \| "in-progress" \| "in-review" \| "done" \| "closed"	—	Task status that drives the badge surface color.
`...props`	useRender.ComponentProps<"span">	—	Column status badge.