Dev Design LibraryOpen the library

Sortable List Components

Dev Design Library indexes 38 sortable list components from 14 open-source UI libraries, with the most coming from ReUI, Watermelon UI, SpaceUI, UI Lab and Cult UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Sortable list components belong to the Data display group.

Sortable ListCult UI · ReactDrag-and-drop sortable list component with smooth animations and reordering
Drag Drop With Physicstransitions.dev · HTML/CSS
Kanban board with placeholder overlayReUI · ReactKanban board with placeholder overlay
Sortable ListLobe UI · ReactSortableList is a component for creating drag-and-drop sortable lists. It allows users to reorder list items through…
Sortable ListbeUI · ReactStable item ids keep focus and content attached to their row during sorting.
Kanban BoardSpectrum UI · Reactcomponent for the Kanban Board
SortablePanel UI · React NativeA list whose rows can be dragged into a different order.
Reorderable ListKinetics · HTML/CSSDrag items up and down; others shift to make room
Pin ItemWatermelon UI · React
Reorderable listArc Library · ReactOrganize items with direct drag and drop.
Kanban BoardUI Lab · ReactLift a card and the others slide aside to make room for it.
SwapyCojeev UI · ReactCards swap positions through a drag handle or keyboard controls and retain their order in React state.
KanbanSpaceUI · ReactDisplays tasks across draggable columns, allowing users to organize projects, track progress stages, and reorder cards…
Kanban BoardReactFrame · ReactA drag-and-drop task board with a hand-rolled pointer-based drag engine, velocity tilt, edge autoscroll, ghost…
Kanban board with dynamic overlayReUI · ReactKanban board with dynamic overlay
Pin Item BaseWatermelon UI · React
Reorder ListUI Lab · ReactPicks rows up by the handle and slides the rest out of the way.
Liquid Sortable ListSpaceUI · ReactSmooth drag-and-drop sortable team list with generative avatars and spring reordering.
Kanban board with frame columnsReUI · ReactKanban board with frame columns
Pin ListWatermelon UI · React
Sortable GridUI Lab · ReactDrag an app tile and the others slide out of its way.
Pin ListSpaceUI · ReactProvides a quick-access bar where users can pin, organize, and reorder favorite items, documents, or shortcuts.
Minimal kanban with stacked frameReUI · ReactMinimal kanban with stacked frame
Shuffle Pinned ItemWatermelon UI · React
SortableSpaceUI · ReactAllows users to reorder items in a list or grid by dragging and dropping them with smooth layout animations.
Feature roadmap kanban with progressReUI · ReactFeature roadmap kanban with progress
Shuffle Pinned Item BaseWatermelon UI · React
Kanban board persisted to a backendReUI · ReactPersist moves with onValueCommit, optimistic updates, and Sonner rollback
Sortable list of items with drag-and-dropReUI · ReactSortable list of items with drag-and-drop
Sortable list of items with grid layoutReUI · ReactSortable list of items with grid layout
Sortable list of items with nested layoutReUI · ReactSortable list of items with nested layout
Sortable playlist with frameReUI · ReactSortable playlist with frame
Sortable settings priority with frameReUI · ReactSortable settings priority with frame
Sortable sidebar navigation with frameReUI · ReactSortable sidebar navigation with frame
Sortable image gallery grid with frameReUI · ReactSortable image gallery grid with frame
Sortable list persisted to a backendReUI · ReactPersist the new order with onValueCommit, optimistic updates, and Sonner rollback
KanbanReUI · ReactA drag-and-drop kanban component designed for seamless item organization across customizable columns.
SortableReUI · ReactA drag-and-drop sortable component designed for seamless item reordering with vertical, grid, and nested layouts.

Libraries with sortable list components

Related categories