Components

Drag Handle

The six-dot handle beside a block or row: drag to move, click to open the block menu.

Usage

Use it to:

  • reorder blocks and rows, with a menu for keyboard users

Don’t use it to:

  • as the only way to reorder (always add menu actions)

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/DragHandleExample.tsx
import { DragHandle } from '@krackedui/motion';

export function DragHandleDemo() {
  return (
    <DragHandle />
  );
}

Examples

Size

Dark theme

API Reference

DragHandle

A <button> named “Drag to move, click to open menu”; supports all of its props. Adds:

PropTypeDefault
size
"sm""md"
"md"

Accessibility

  • A button: Enter / Space fire onClick, so open the block menu there and offer keyboard “Move up / down” items in it; dragging alone is not keyboard accessible.
© 2026 Motion. Internal documentation.