shadcn.io is not affiliated with official shadcn/ui
Developer Tools Sidebar Block for React
A browser IDE in a fixed-height window whose sidebar lists open editors above Code, Source control and Deploy, with close buttons, unsaved-change dots, Close all and Reopen closed.
Installation
Overview
Keep track of what is open with this developer tools sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Codebarrow, a browser IDE. Open editors sits on top of Code, Source control and Deploy. Choosing a page in any group opens it into the list once and shows it. Each open editor has a close Button; two carry a dot for unsaved changes, read as unsaved changes by a screen reader. Close all empties the list, closing the shown editor shows its neighbour, and Reopen closed brings back the last one closed, as a stack, at its old place. The page shows the editor's text in numbered lines. Built from Sidebar, Button, Empty and Guides, with a CSS entrance only. For editors, consoles and any tool with a working set of open things.
FAQ
How do editors open and close?
Choosing a page opens it into Open editors if it is not there and shows it. The close button removes it; if it was the shown editor, its neighbour after it is shown, or the one before when it was last. With none left, the page shows an empty state.
How does Reopen closed work?
Every closed editor is pushed on a stack with the place it held. Reopen closed pops the last one and puts it back at that place, shows it, and says how many more can come back. Close all pushes every open editor, so Reopen brings them back one at a time, the last closed first.
What does the dot mean?
The editor has unsaved changes. It is a decoration; the editor's name includes unsaved changes for a screen reader. Closing a dirty editor here keeps its changes for Reopen, and the status line says so. There is no save in this demo.
What happens when the sidebar folds to icons?
The rail shows the pages of the three groups as icons with tooltips and hides Open editors and its 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 editors and their lines are typed at the top of the file and the open list lives in the block's state. Back it with your file system and persist the open list and the closed stack to make it real.
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. Choosing a page closes the sheet and shows the editor. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.
Related
- 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.
- 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
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
Nested Collapsible Sidebar
Folds and treesA help centre in a fixed-height window whose wide sidebar folds three levels deep, categories that hold topics that hold articles, with a Reveal active button that opens only the folds above the open article.
- Pro
A blogging platform in a fixed-height window whose slim sidebar opens with a Recently edited group of up to four pages, a Clear button and a draft count on Posts, above four admin groups.