Drag sort grid
Grid of tiles reorderable by drag with neighbours sliding via shared layout, plus keyboard lift/move/drop with live announcements; dashboard widgets demo.
Preview
Revenue
$46.2k
+18% on last month
Active users
2,814
Last 7 days
MKTRAOLSConversion
3.4%
Visit to signup
Uptime
99.88%
Last 14 days · 1 incident
Open tickets
17
- Urgent3
- Waiting on us9
Recent deploys
- web · 4f2a9112 min ago
- api · c81d07Rolled back · 1 h ago
- worker · 9e33b03 h ago
Press Space or Enter on a tile to pick it up, arrow keys to move it, Space to drop it.
Drag a widget, or focus one and press Space, then the arrow keys.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items / defaultItems / onItemsChange | { id: string }[] / … / (items) => void | — / [] / — | Tile order; changes on drag and keyboard moves. |
| children | (item, { lifted }) => ReactNode | — | Renders a tile's content. |
| getLabel | (item) => string | — | Tile name, used as its label and in announcements. |
| getTileClassName | (item) => string | undefined | — | Extra tile classes, e.g. @xl/dsg:col-span-2 for wide widgets. |
| label | string | "Sortable tiles" | Accessible name of the grid list. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.