Sortable List
Drag rows by their handle to reorder; neighbours slide out of the way and keyboard users can lift and move rows.
sortable-list.tsxsortable-list.css
Checking access…
Overview
Grab the handle and the row lifts with a soft shadow while the others glide to open a gap. Drop and it settles into place.
From the keyboard, Space lifts a row, arrows move it, Space drops and Escape cancels. Each move is announced.
When to use
- Priorities, playlists, navigation menus, form builders.
When not to use
- Long lists across scroll containers: use a full DnD library.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/sortable-list.json$
npx shadcn@latest add https://sundaeui.dev/r/sortable-list.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/sortable-list.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/sortable-list.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy sortable-list.tsx and sortable-list.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { SortableList } from '@/components/sundae/sortable-list'
<SortableList />Props
| Prop | Type | Default |
|---|---|---|
items*Rows. | { id: string; label: string; meta?: string }[] | — |
onReorderCalled after a drop. | (ids: string[]) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Handles are buttons with instructions in aria-describedby.
- Lift, move and drop are announced through a live region; Escape restores the original position.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-srt; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Space
- Lift / drop
- ↑ / ↓
- Move lifted row
- Esc
- Cancel
FAQ
- Is Sortable List free?
- Sortable List is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Sortable List?
- Run npx shadcn@latest add https://sundaeui.dev/r/sortable-list.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Sortable List support keyboard and screen readers?
- Handles are buttons with instructions in aria-describedby. Lift, move and drop are announced through a live region; Escape restores the original position.
- Does Sortable List respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All components →- Pro
Swipe Actions
Components · Refined - Pro
Bulk Actions Bar
Components · Refined Grid / List View Switcher
Components · RefinedPull to Refresh
Components · RefinedLoad More List
Components · RefinedTask List
Components · Refined