shadcn.io is not affiliated with official shadcn/ui
Draggable Items Sidebar Block for React
A reading workspace in a fixed-height window whose sidebar holds three reading lists you reorder by dragging a grip or with Move up and Move down buttons, inside each list only.
Installation
Overview
Reorder the rail's rows by hand with this draggable items sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Cindershelf, a bookmark and reading workspace, with three lists: Today, This week and Someday. Drag a row's grip with a pointer and the row follows it; or use the Move up and Move down Buttons beside it, which appear on hover or focus and are the keyboard way. A polite status line says Moved Field notes above Pocket maps. A row never leaves its own list. The page shows the open article and its list in the current order. Built from Sidebar, Button and Guides, with pointer events and a CSS entrance, no drag library. For reading lists, playlists, queues and any rail where order matters.
FAQ
How do I reorder without a pointer?
Tab to a row's Move up or Move down button, which appear when the row has focus, and press Enter or Space. The status line says what moved and where it is now, and focus stays on the same button so you can press it again. At the top or bottom the button stays but says the row is already first or last.
How does the pointer drag work?
Pressing the grip captures the pointer on the list and the row under the pointer decides where the held row goes, so the order updates as you move. Releasing drops it and the status line says where. Pointer capture means the grip can move in the page while it is dragged. The grip is for the pointer only and is hidden from a screen reader.
Can a row move to another list?
No. A drag only swaps with rows of its own list, and the move buttons stop at the ends. Moving between lists would be a different feature with its own confirmation.
What happens when the sidebar folds to icons?
The rail keeps the articles as icons with tooltips and hides the handles and buttons. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The articles are typed at the top of the file and the order lives in the block's state. To save it, send the new order of the changed list in the move and drop handlers.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The move buttons are always visible there, since a phone has no hover, and dragging by the grip works with touch. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.
Related
- Pro
A planning app in a fixed-height window whose sidebar groups, Projects, Documents and Tags, each have a plus that opens an inline create row and a menu with Sort A to Z, Sort by recent and Collapse.
- Pro
A project workspace in a fixed-height window whose sidebar rows each hold Pin, Duplicate and Archive buttons, with a real Undo in the footer that puts an archived project back in its old place.
- Pro
A knowledge workspace in a fixed-height window whose muted sidebar has a Favorites group above All pages, where a star on every row pins a page, up to five.
- Pro
Tab Groups Sidebar
Headers and sectionsA markdown editor in a fixed-height window whose sidebar has a tab strip over its list, switching between Files, the open file's Outline and Bookmarks, each keeping its own selection and marking the chosen line in the document.
- Pro
Collapsible Groups Sidebar
Folds and treesA framework's docs in a fixed-height window whose slim sidebar has five groups that fold from their labels, with Expand all and Collapse all, a count of open groups and a dot on a folded group that holds the current page.
- Pro
File Tree Sidebar
Folds and treesA code editor in a fixed-height window whose slim sidebar is a file tree with file-type icons, arrow-key, Home, End, asterisk and type-ahead navigation, a Collapse all button, and the chosen file's lines and path on the page.