Shadcn Sortable

Browse 8 production-ready shadcn sortable components using @dnd-kit/sortable. Covers vertical lists, grid galleries, nested layouts, playlist ordering, settings priority, sidebar navigation, and image gallery sorting: all keyboard accessible and composable with shadcn primitives.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Ranked lists such as a play queue, notification channels or release tasks, put in order by a grip
Tile grids such as a media library, where cards change places across rows and columns
Grouped options and menus reordered in place, such as product variants or sidebar menu entries

When not to use

Cards that move between several status columns on one board: use the Kanban component
Ranked table rows that keep several columns of values lined up: use the Drag & Drop blocks
A whole page layout of sidebar, top bar and content area around the list: use the App Shell blocks

Agent notes

Drag listeners sit on SortableItemHandle only, so a SortableItem rendered without one cannot be dragged
Passing onMove skips the built-in reorder, so neither onValueChange nor onValueCommit fires on drop
The drag preview clones the child of Sortable whose value matches the dragged item, so a wrapper around SortableItem needs that value too

Third-party API docs

dnd kit v6: API reference, docs (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)
Base UI v1: API reference, docs, llms.txt, through the Base UI twin
Radix UI v1: docs, through the Radix UI twin
Sonner v2: API reference, docs, used by 4 of 8 examples

Markdownhttps://reui.io/components/sortable.md

MCPget_component("sortable")

Installnpx shadcn@latest add @reui/sortable

Full index for agents:llms.txtReUI MCP setup

Shadcn Sortable: Reorder Lists, Grids, and Galleries

ReUI Sortable is a custom shadcn component built on @dnd-kit/sortable: the same engine powering ReUI's Kanban and Data Grid column reordering. It wraps any list or grid of items in a SortableContext and exposes a useSortable hook-based API for individual items, giving you full control over drag handles, visual feedback, and drop animation.

8 components cover vertical drag-and-drop lists, grid layouts, nested structures, playlist ordering, settings priority queues, sidebar navigation reordering, and image gallery grids.

The sections below explain the component architecture, practical use cases, and how Sortable composes with Kanban, File Upload, and other ReUI primitives.

What is Shadcn Sortable?

ReUI Sortable is a custom drag-and-drop reordering component, distinct from the base shadcn/ui library. It uses @dnd-kit/sortable's SortableContext and useSortable hook to make any array of React elements reorderable. Items receive a transform and transition during drag, a drag handle activates the gesture, and arrayMove updates the order on drop.

Components show sortable items in vertical lists, responsive grids, and nested layouts. Frame wrappers pair sortable lists with toolbars and Sonner feedback for async save: the same composed layout used in ReUI's sidebar navigation and settings priority examples.

Why Use Shadcn Sortable?

Reordering is a common interaction: playlist tracks, dashboard widget order, sidebar navigation priority, settings queue, image gallery arrangement, and task priority all benefit from drag-and-drop reordering with a save action. DnD Kit provides the most accessible, touch-friendly, and React-idiomatic implementation available.

ReUI Sortable components go beyond a bare list: they show real content (cards with avatars and badges, images with overlays, nav items with icons) inside Frame containers with Sonner toast feedback. Pair with Shadcn Kanban for column-based boards and Shadcn File Upload for drag-to-reorder uploaded images.

Shadcn Sortable Features

DnD Kit Sortable Engine. Powered by @dnd-kit/sortable. SortableContext provides the item order and collision strategy; useSortable exposes transform, transition, and setNodeRef for each item. arrayMove handles order updates on drop.
Vertical List, Grid, and Nested Layouts. Switch between vertical list, responsive CSS grid, and nested item structures without rebuilding drag logic. Layout changes are Tailwind class changes: the sortable context stays identical.
Keyboard Accessible Reordering. DnD Kit's keyboard sensor lets users reorder items with arrow keys and confirm with Space or Enter. Meets WCAG 2.1 success criteria for drag-and-drop alternatives without extra code.
Drag Handle Component. A dedicated drag handle icon activates the drag gesture, leaving the rest of the item interactive. Buttons, links, inputs, and toggle switches inside items work normally without triggering a drag.
Practical Real-World Presets. 8 components cover playlist ordering, settings priority, sidebar navigation, and image gallery grids: all inside Frame containers with Sonner toast feedback for persisting the new order to a backend.
Image Gallery Sorting. Grid sortable component with image overlays supports drag-to-reorder uploaded images: composable with the File Upload component for a complete image management flow.
Smooth Drop Animation. DragOverlay renders a floating clone of the active item during drag. CSS transitions animate the surrounding items into their new positions as the dragged item moves, giving users clear spatial feedback.

ReUI Sortable: In-House Custom Shadcn Component

ReUI Sortable is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project: following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Sortable is a custom drag-and-drop reordering component not available in base shadcn/ui. Built on @dnd-kit/sortable using SortableContext and useSortable hooks, it handles pointer, touch, and keyboard drag with arrayMove state updates. 8 components cover vertical lists, grid galleries, nested layouts, playlist ordering, settings priority, sidebar navigation, and image gallery sorting.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling: only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.

Pair Sortable with Shadcn File Upload to build an image management flow: users upload files, then drag-and-drop to reorder them before saving. The image gallery sortable component demonstrates this exact composition.

Use Sortable for single-list reordering and Shadcn Kanban for multi-column board reordering. Both share the same DnD Kit engine, so drag handle, overlay, and keyboard conventions are consistent across your app.

Wrap sortable lists in Shadcn Frame for toolbar and action chrome, use Shadcn Badge and Shadcn Avatar for rich item content, and Shadcn Sonner for async save feedback when order changes are persisted.

List Blocks in ReUI Pro

The free examples above pair with 11 production ready list blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

List (11 blocks)List layouts for contacts, records, activity rows, grouped collections, and compact action surfaces.

Browse all Application blocks

Frequently Asked Questions

How do I persist sort order to a database after reordering?

Sortable commits once, on drop, through onValueChange, so persist there. For index-based mutations and a one-line rollback, use onValueCommit instead: it hands you the reordered array and a previousValue snapshot. Call your Server Action or API endpoint, keep the optimistic UI while it saves, and on error revert with meta.previousValue and show a Sonner toast.

Does sortable support keyboard drag-and-drop accessibility?

Yes. DnD Kit's keyboard sensor lets users reorder items with arrow keys and confirm with Space or Enter. This meets WCAG 2.1 drag-and-drop accessibility requirements without extra code.

Can I use sortable inside a scroll container?

Yes, but configure activationConstraint to prevent accidental drags during scrolling. Set a delay (100ms) or distance (10px) threshold. The auto-scroll plugin helps users drag items near scroll edges.

How do I implement optimistic reorder updates with rollback?

Update local state immediately in onValueChange, which fires on drop. Call the API in a try/catch, or use onValueCommit and its previousValue snapshot. If the request succeeds you are done. If it fails, revert to the previous order and show an error toast.

Can I create nested sortable lists?

Yes. Nest multiple Sortable roots and handle onValueChange at each level. Drag items between parent and child lists by checking the over index. The tree component demonstrates nested sorting.

How does sortable work with images and media files?

Render image elements inside sortable items. The drag handle and transform still apply. Pair with File Upload to let users upload then reorder images. The image gallery component shows this flow.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.