shadcn.io is not affiliated with official shadcn/ui
Right Side Sidebar Block for React
A team file manager in a fixed-height window with its sidebar on the end side: choose a file in the list and the sidebar shows its details, a Copy path button and a Close button, and on a phone it opens as a sheet.
Installation
Overview
Give a file manager its details panel with this right side sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds the page's list of six files, each a selectable row with its kind and size, and the Sidebar on the end side, set with placement="right" (or side="right" on the other bases), where right means the layout's end. Choose a file and the sidebar fills in: a Data List of its kind, size, last-edited day, owner with an initials Avatar and tags as Badges, its path, and a Copy Button that really copies the path. Close empties the sidebar to an Empty state, "Choose a file". The sidebar folds away completely with the menu button, and choosing a file unfolds it again; on a phone it is a sheet from the end edge that opens when you choose a file. It's built from Sidebar, Data List, Copy Button, Badge, Avatar, Empty, Button and Guides, with a CSS entrance only. For file managers, inspectors, record lists and any app with a details pane.
FAQ
What does right mean here, and does it work in right-to-left pages?
The Sidebar's edge is logical: right is the layout's end, so in a right-to-left page the sidebar sits at the left, and the phone sheet opens from there too. The page markup comes first and the sidebar second, which also puts the file list first in the reading and tab order. The menu button at the end of the top bar has its icon turned to match. The prop is side="right".
Why does the sidebar fold away instead of shrinking to icons?
A details panel has no menu of icons to keep, so the block uses collapsible="offcanvas": folded, the panel slides out of the window and the page takes the width. Its buttons leave the tab order while it is away (it is marked inert), and choosing a file in the list brings it back, so you never select a file and see nothing happen. The menu button, the rail along the edge and Close all stay available.
What stays in the page, and how do I connect it?
Everything but the clipboard. The six files, their owners and tags are typed in ENTRIES, and choosing, closing and copying change only the block's own state and its status line; nothing is opened, downloaded or uploaded. Copy path really writes the path to the clipboard, and says so, or says the clipboard refused it. Replace ENTRIES with your records and keep the same split: a list that picks, and a panel that shows the picked record.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet from the end edge, and it opens when you choose a file, with the sheet's own focus handling. Close, Escape or the dismiss gesture closes it, and focus goes back to the file you chose, not to the top of the page. The list is the page, so its first row is on the first screen, and the status line names the selected file.
How do I get back to the empty state?
Press Close in the panel's header. The selection clears, the list shows no current row, the sidebar shows "Choose a file" and the status line says nothing is selected. On a phone Close also dismisses the sheet. The panel keeps its place and size, because only its contents change.
Is it accessible?
The list rows are buttons, the chosen one is marked as current, and the panel's header names the file with a heading; the details are a description list of labels and values. Close and Copy path say which file they act on, the icons are decorative, and one polite status line reports each choice, close and copy. A panel folded away is out of the tab order, and the file list scrolls inside its own region when there are more files than fit.
Related
- Pro
Offcanvas Sidebar
VariantsA reading app in a fixed-height window whose sidebar slides fully out of view, so the article's line length grows from 62 to 78 characters; the trigger, the edge rail and Ctrl or Command with B bring it back.
- Pro
Controlled State Sidebar
State and themingA layout playground in a fixed-height window with a controlled sidebar: Open, Close, Toggle, a switch and Ctrl or Command with B all drive the provider, and every onOpenChange call is logged with where it came from.
- Pro
Custom Width Sidebar
VariantsA hosting platform's settings console in a fixed-height window where the sidebar's width is the control: four presets set its CSS variable, and a measured count shows how many of ten long labels get cut at each.
- 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.
- 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
Dual Column Sidebar
Icon railsA site builder in a fixed-height window whose single sidebar is two columns: an icon rail of sections and, beside it, a panel of the browsed section's pages, with the open page kept across sections.