shadcn.io is not affiliated with official shadcn/ui
Sort Reorder CRUD Block for React Aria
A help centre's navigation order where each item takes a typed position: Enter moves it and the others close up, Top and Bottom jump, every moved item says was and now, and Save order commits or Reset puts the saved order back.
Installation
Overview
Reorder a list by saying where an item should go instead of dragging it, with this navigation order for React with React Aria. A hairline frame with a plus mark on each corner holds a quick line that adds an item at the bottom, and one frame of fixed height with seven numbered items. Each row has a Position Number Input: type 2 and press Enter and the item moves there while the others close up; Top and Bottom Buttons jump to either end and Remove takes the item out. Every item that is no longer where it was saved says "was 4, now 2", worked out against the saved order, so moving it back clears the words; one added since says New. A foot counts the changes and holds Save order, the only Shine Button, which waits until something moved and then commits the order, beside Reset, which puts the saved order back. Remove leaves "Removed Security and privacy." in the status line beside an Undo, the bands are ruled by Guides, and an empty list shows an Empty state. For help centres, menus, onboarding steps and any list whose order is data.
FAQ
How do I fill it with my own items?
Edit ITEMS: each has an id and a name. The saved order is the list of ids in SAVED_IDS, taken from the same array, and everything else is derived from the two: the position numbers, the "was 4, now 2" words and the count in the foot. New ids come from a counter held in state.
What happens when I type a position?
Enter reads what you typed. A whole number from 1 to the number of items moves the item there, the others close up, focus stays in that item's field and the polite line says "Moved Billing and invoices from 3 to 1. Not saved yet." Anything else, such as 0, 9 on a list of seven, or letters, is refused with its reason and the field goes back to the item's real position. Typing the position an item already has says so and changes nothing.
Is there a keyboard route without typing a number?
Top and Bottom are ordinary buttons, and the Position field is a number field, so the whole block works from the keyboard. There is no drag: this block is the route for people who cannot or would rather not drag, and focus follows the control you used after every move.
What do Save order and Reset do?
Save order is greyed out and says "Nothing moved since the last save" while the order equals the saved one. After a change it saves the order, clears every "was, now" word and says so in the polite line. Reset puts the items back in the saved order, keeping items added since at the end. Both are guarded buttons, not disabled ones, so they stay reachable and explain themselves when pressed.
What stays local, and how do I wire a real save?
The order lives in state in this tab and a reload brings the original seven back; nothing is published. In your app send the ids of items in order to your API from save, replace savedIds with what the server confirms, and keep Undo as an optimistic step that calls your restore endpoint.