Dowe

FORM

DragDrop

DragDrop models reorderable items and grouped lanes with explicit IDs, empty states, transfer rules, and target-native interaction.

PLAYGROUND

Organize a delivery board

Grouped lanes keep ownership visible. allowGroupTransfer lets an item move between lanes while each dragItem keeps a stable ID.

Backlog

In progress

Done

DragDrop emptyText:"Drop a task into this lane" direction:"horizontal" allowGroupTransfer:true variant:"outlined" scheme:"primary" size:"lg"
  dragGroup id:"backlog" title:"Backlog"
    dragItem id:"research" label:"Research API" description:"Confirm the response contract."
    dragItem id:"wireframe" label:"Review wireframes" description:"Resolve the empty states."
  dragGroup id:"in-progress" title:"In progress"
    dragItem id:"compiler" label:"Update compiler" description:"Keep the generated model aligned."
  dragGroup id:"done" title:"Done"
    dragItem id:"release" label:"Publish notes" description:"Summarize the shipped behavior."

LAYOUTS

Use one list or several lanes

Direct dragItem children create one list. dragGroup children create independent lanes. Do not mix both child shapes in one DragDrop.

Ready

Blocked

DragDrop emptyText:"Drop unassigned work here" direction:"vertical" variant:"soft" scheme:"success" size:"md"
  dragItem id:"draft" label:"Draft brief" description:"Needs a first review."
  dragItem id:"feedback" label:"Collect feedback" description:"Waiting on product input."

DragDrop emptyText:"This board is read-only" direction:"vertical" disabled:true variant:"ghost" scheme:"muted" size:"sm"
  dragGroup id:"ready" title:"Ready"
    dragItem id:"approved" label:"Approved request" description:"No further changes."
  dragGroup id:"blocked" title:"Blocked"
    dragItem id:"dependency" label:"External dependency" description:"Waiting on another team." disabled:true

STATES AND DENSITY

Make movement and constraints visible

Empty text, disabled items, and size communicate whether a board is ready for movement or only showing a static plan.

Nothing is queued yet

Today

Later

BEHAVIOR

A deterministic movement model

Dowe lowers authored item IDs, lane structure, drag direction, and disabled state to shared target-neutral data.

STRUCTURE

Stable IDs

Every dragItem and dragGroup needs a unique ID within the DragDrop tree.

TRANSFER

Explicit movement

allowGroupTransfer controls cross-lane movement; direction controls the main arrangement.

TARGETS

Native drag affordances

Web, SwiftUI, and Compose preserve handles, insertion feedback, empty lanes, and disabled states.

API

Props

DragDrop also accepts the applicable common spacing, sizing, typography, visibility, accessibility, and shadow props.

Prop	Type	Default
No data There are no records to display

No data