Free and open-source React sortable list components with drag handles and keyboard reordering. Built with React Aria and styled with Tailwind CSS.
User research
Wireframes
Interactive prototype
Developer handoff
Design QA
Installation
npx properui@latest add sortable-listSettings sections
Rows accept an icon, a description and trailing content such as a toggle, which stays operable while the row is sortable.
Settings sections
Drag to change the order of the settings sidebar. Hidden sections keep their place.
Profile
Name, photo and contact details
Notifications
Email, push and in-app alerts
Security
Password, two-factor and sessions
Billing
Plan, invoices and payment method
Appearance
Theme, density and font size
Language and region
Locale, time zone and currency
Sidebar order: Profile, Notifications, Security, Appearance
Cards variant
Intro
Sunrise drive
Static bloom
Harbor lights
Usage notes
onReorder receives the items in their new order, so onReorder={setItems} is enough for local state. The raw React
Aria reorder event is passed as the second argument, and reorderItems(items, event) is exported for use in your own
state logic. Keyboard users focus a row, press the right arrow to reach its handle, press Enter, move with the arrow
keys and press Enter again to drop.