shadcn.io is not affiliated with official shadcn/ui
Action Buttons Sidebar Block for React
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.
Installation
Overview
Act on a row without leaving the list with this action buttons sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar of seven projects in Foldmere, a project and document workspace. Hover or focus a row and three icon Buttons appear, each with a Tooltip: Pin moves the project to the top under a pin glyph, Duplicate adds a copy named after it, and Archive takes it off the list. An archived project is never lost: a row in the footer names the last one and its Undo puts it back where it was, one archive at a time. The page shows the open project's documents and how the list stands. Folded to icons the rail keeps the projects with tooltips and hides the buttons; on a phone the buttons are always visible. Built from Sidebar, Button, Tooltip, Badge, Empty and Guides, with a CSS entrance only. For project lists, file shelves, inboxes and any list where a row has a few quick actions.
FAQ
What do the three buttons do?
Pin toggles: the project moves to the top under a pin glyph and the button turns to Unpin, which sends it back to its own place among the rest. Duplicate inserts a copy right under its source, named "Mobile App copy", then "Mobile App copy 2", and it opens with the source's documents. Archive removes the row and fills the footer with its name.
How does Undo work?
Every archive is pushed on a stack and the footer row always shows the latest. Undo pops it, puts the project back at the index it left, opens it and says where it landed ("Restored Mobile App to number 3 of 7"). With several archived, the row counts the rest. With nothing archived the button stays but answers in words instead of acting, so the footer never changes height.
Where does focus go after an action?
After Archive it moves to the next row's link, the previous one if it was last, and to Undo if the list is empty. After Pin it stays on the button, which keeps its place in the row even though the row moved. After Undo it lands on the restored row. The block finds the element by a key because the row it was on has moved or gone.
What happens when the sidebar folds to icons?
The rail shows the projects as icons with tooltips and hides the buttons and the undo row. 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 projects and their documents are typed at the top of the file and every change stays in the block's state; nothing is saved. To make it real, call your API inside the pin, duplicate and archive handlers and keep the Undo stack, which already matches a soft delete with a restore endpoint.
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 buttons are always visible there, since a phone has no hover, and choosing a project closes the sheet. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.
Related
- Pro
Header Actions Sidebar
Headers and sectionsA notes app in a fixed-height window whose slim sidebar header holds three ghost icon buttons with tooltips: New note adds and opens a note, Search filters the notes, and the third folds the rail.
- Pro
A project tool in a fixed-height window whose muted sidebar lists eight projects with a menu on each row: View, Rename in place, Share with Copy link and Invite, and a confirmed Delete.
- 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 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
Collapsible Items Sidebar
Folds and treesA design system's docs in a fixed-height window whose sidebar rows are split: a label that opens a section's overview and a separate chevron that opens its sub-menu, with a count of pages on each row.
- Pro
Email Client Sidebar
App contentA mail client in a fixed-height window: mailboxes and labels whose counts follow the mail you file, a searchable message list beside the open message, and Compose for a local draft.