Layout · Drag & drop

The drag-and-drop layout kit — accessible, touch-friendly, reduced-motion-safe sortable card lists and grids, plus a resizable dashboard grid. Built on dnd-kit; keyboard-drivable and SSR-safe. Presentational: the app owns items and persistence.

Keyboard-drivableTouch-friendlySSR-safeReduced-motion awarednd-kit under the hood

The drag-and-drop kit (@package/web-ui/dnd) is dnd-kit under a thin, tokenized layer. It is code-split behind its own subpath (like the charts kit), so it never enters the base bundle. Every surface renders a static, inert copy of the same card DOM on the server and the first client render, then hydrates into a pointer- and keyboard-drivable surface — Tab to an item or its handle, Space to lift, arrow keys to move or resize, Escape to cancel — with polite screen-reader announcements throughout. Everything is presentational: you pass an app-owned items array and a renderItem, and the kit hands the new order/layout back via onReorder / onLayoutChange for you to apply and persist — it stores nothing. Toggle the theme (top right) to see light and dark both hold up.

Sortable list

A drag-to-reorder card list with a dedicated handle. Pointer, touch, and full keyboard dragging (Space to lift, arrows to move, Escape to cancel) with polite screen-reader announcements. Presentational — it hands the new order back; the app persists it.

  • Card
  • Design the empty stateDesign · due Fri
  • Wire the reorder APIBackend · due Mon
  • Keyboard-drag QA passA11y · due Tue
  • Rewrite onboarding copyContent · due Wed

Grab the handle (pointer or touch), or Tab to it and press Space, then use the arrow keys.

Sortable grid

The same reorder engine on a responsive, mobile-first grid (1 → 2 → 3 columns). The whole card is the drag target here. Reorders animate; reduced-motion collapses the motion.

  • Card
  • CardHeader
  • CardTitle
  • CardContent
  • Badge
  • Inbox12
    Drag anywhere on the card to rearrange the board.
  • Triage5
    Drag anywhere on the card to rearrange the board.
  • In progress3
    Drag anywhere on the card to rearrange the board.
  • In review7
    Drag anywhere on the card to rearrange the board.
  • Done24
    Drag anywhere on the card to rearrange the board.
  • Archive91
    Drag anywhere on the card to rearrange the board.

Resizable dashboard grid

Cards drag to rearrange AND resize from the bottom-right grip (drag, or focus it and use the arrow keys). The grid drops columns as it narrows so it stays usable on a phone. The full layout is exposed for the app to serialize and restore.

  • Card
  • CardHeader
  • CardDescription
  • CardContent
  • Revenue
    $48.2k
    +12.4% vs last week
  • Active users
    2,318
    +4.1% vs last week
  • Growth
    18.9%
    +2.0pt vs last week
  • p95 latency
    148ms
    -9.0% vs last week
Serialized layout (persist this):
{
  "revenue": {
    "colSpan": 2,
    "rowSpan": 2
  },
  "users": {
    "colSpan": 1,
    "rowSpan": 1
  },
  "growth": {
    "colSpan": 1,
    "rowSpan": 1
  },
  "latency": {
    "colSpan": 2,
    "rowSpan": 1
  }
}