Shadcn Sortable
View docsBrowse 7 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.
Sortable list of items with drag-and-drop
Sortable list of items with grid layout
Sortable list of items with nested layout
Sortable playlist with frame
Sortable settings priority with frame
Sortable sidebar navigation with frame
Sortable image gallery grid with frame
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.
Seven 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 in onDragEnd.
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 in onDragEnd.
- 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. Seven 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. Seven 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 10+ 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.
Integrating With Other Components
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.