Sortable List

A drag-and-drop sortable list with keyboard accessibility powered by dnd-kit. Each row renders via a renderItem render-prop, keeping item presentation fully customisable.

Design system tokens

Primitive components

Pattern compositions

Block layouts

Order: Design → Primitive → Pattern → Block

import { SortableList } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add sortable-list

Import

import.tsx

import { SortableList } from "@aetherstack/patterns"

Usage

sortable-list.tsx

import * as React from "react"
import { SortableList } from "@aetherstack/patterns"

const INITIAL = [
  { id: "1", label: "Design tokens" },
  { id: "2", label: "Primitives" },
  { id: "3", label: "Patterns" },
]

export function MySortableList() {
  const [items, setItems] = React.useState(INITIAL)
  return (
    <SortableList
      items={items}
      onReorder={setItems}
      renderItem={(item) => <span>{item.label}</span>}
    />
  )
}

Props

Prop	Type	Default	Description
items*	{ id: string; [key: string]: unknown }[]	—	Array of items to render. Each must have a unique id.
onReorder*	(items: T[]) => void	—	Called with the reordered array after a drag or keyboard move.
renderItem*	(item: T) => ReactNode	—	Render function for each list item's content.
className	string	—	Additional classes on the list container.

* Required

Accessibility

→Built on @dnd-kit/sortable — each row receives a drag handle with aria-roledescription="sortable" and live position announcements.
→Keyboard users can lift an item with Space, move it with arrow keys, and drop with Space or cancel with Escape.
→A visually-hidden aria-live region announces position changes as items are reordered.
→Drag handles carry an aria-label describing the current item.