shadcn.io is not affiliated with official shadcn/ui
Drag Reorder File Upload Block for Ark UI
A loan application's attachment tray: files in reading order with pin toggles, a Name, Size or Type preset for the rest, a Custom order chip once you move one, and reordering by pointer, keyboard or buttons.
Installation
Overview
Let people decide what gets read first, with this reorderable upload list for React with Ark UI. It is the attachment tray of Packetry, a tool for loan applications. A toolbar band holds a Segment Group that sorts the unpinned files by Name, Size or Type, a Custom order chip that appears the moment you move a file by hand, Reset and Add files. Under it an ordered list shows each file with a grip, its type and size, a Pin toggle and Move up and Move down buttons. Pinned files stay above the rest and move only among themselves. Drag a grip with the pointer; or press Space on it to pick the file up, use the arrow keys, Home or End to move it, Space to drop it and Escape to cancel; or use the buttons. Every move is announced ("bank-statement-aug.pdf moved to position 3 of 7"). Save order, the only Shine Button, is in the foot and says "No changes to save" when the order matches what was saved. Files are added with File Upload, by Add files or by dropping on the list. The bands are ruled by Guides, with a CSS entrance only. For attachment trays, document packets and any list where order matters.
FAQ
How do pins and presets work together?
The list shows pinned files first, then the rest, each group in the block's order. Choosing a preset sorts that order (largest first for Size, by extension then name for Type) and clears the Custom chip. Pinning a file lifts it into the pinned group at its place in the order; unpinning drops it back. A move never crosses the boundary: a pinned file moves among the pinned ones only, and trying to go past an edge says so.
When does the Custom chip show?
When you move a file by pointer, keys or buttons. The chip's space is reserved, so nothing shifts when it appears. Reset puts the preset order back and hides the chip. Files you add while the order is custom go to the end; while it follows a preset, they are sorted into it.
How do I reorder without a pointer?
Focus a file's grip and press Space: it is picked up (the button shows pressed) and the status line says so. The arrow keys move it one place, Home and End to the edge of its group, Space drops it, Escape puts it back where it was. The Move up and Move down buttons do the same one place at a time, and focus follows the control you used after the list re-renders. Buttons are 44 px on a phone.
What does Save order do?
It keeps the order and the pins in this tab's state, turns the Save button quiet and says "Order kept in this tab. Nothing was sent." In your app, post the list of ids and pin flags from save and show the server's answer in the status line.