Reorderable cards with a grip and a mono position. The item lifts at −2° over a dashed slot.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/sortable-listPlayground
- Clarify onboardingProduct brief01
- Review empty statesDesign system02
- Ship the updateRelease checklist03
Titles only
- Clarify onboarding01
- Review empty states02
- Ship the update03
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/sortable-list
Accessibility
- An ordered list, so position is read out.
- Each grip names the item and its position.
- Moves are announced politely.
Motion
- Lift scales to 1.02 and tilts −2° on a 200 ms spring.
- Neighbors slide 200 ms by transform.
- Drop settles on a 300 ms spring.
- With reduced motion, there is only the ring and the slot.
Responsive behavior
- 460 wide on Web and 358 on Mobile.
- The grip is 44 tall and uses touch-action none, so dragging does not scroll.
Performance
- The dragged row moves on a Motion value, so dragging does not re-render each frame.
- It has no windowing. Keep it to lists people can reorder by hand.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import SortableList and the SortableItem type. Props: items, onReorder, label, animated.
- Keyboard: Space lifts a row, arrows move it. Moves are announced, so pass text when title is not a string.
- items only sets the start. Save the order from onReorder.
Related
KanbanProBlockA board of Kanban Columns you drag Kanban Cards between, in Issues, Tasks and Points styles, with a full keyboard path.TableComponentNative table parts on one cell component, in Compact or Comfortable density and Plain or Grid style.ItemComponentA row that shows one thing: media, a title, a description and an optional action.Tree ViewComponentA file tree with guides, inline renaming and the selected path in the footer.