Database

Board View

Kanban columns grouped by a status or select property. Cards drag between columns and reorder within one.

Tasks
Not started
4
In progress
2
Done
2

Usage

  • Use the board layout for workflows where rows move through stages (status or select groups).
  • Group by a status or select property with a small number of options; long option lists make wide, sparse boards.
  • Don’t use a board when people need to compare many properties at once; use the table layout instead.
  • Keep a non-drag path for every move: Alt+←/→ on the card, or the status cell in the row peek.

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';

Use it anywhere inside your app's <Theme> (see Installation):

/src/BoardViewExample.tsx
import { DatabaseView, createTasksSample } from '@krackedui/motion';

export function BoardViewExample() {
  return (
    <DatabaseView data={createTasksSample()} initialViewId="v-board" />
  );
}

Examples

Card hover actions

Tasks
Not started
4
In progress
2
Done
2

Card actions alone

Composition

Views read the database from context, so render them inside <DatabaseView> (which picks the active view for you) or inside your own <DatabaseProvider value={useDatabase(...)}>.

anatomy
<BoardView>                    // grouped by view.groupBy (default: first status/select)
  column × n (276 wide, gap 12)
    header   → option pill · count · hover actions
    role="list" → card (role="listitem", draggable) · CardActions on hover
    "+ New page"
</BoardView>

API Reference

BoardView

PropTypeDefault
onOpenRow
(row: Row) => void
hoveredRowId
string

CardActions

Hover actions on board and gallery cards (pencil + ellipsis).

PropTypeDefault
onEdit
() => void
onMore
() => void
className
string

Accessibility

  • Each column body is a role="list" labelled by the group name; cards are listitems.
  • Cards open on click; hover actions are buttons labelled "Edit" and "More".
  • Drag and drop uses HTML5 DnD (pointer). Keyboard alternative: on a focused card, Alt+← / Alt+→ move it to the previous / next column (aria-keyshortcuts); a polite status message announces the new column and focus stays on the card.
© 2026 Motion. Internal documentation.