shadcn.io is not affiliated with official shadcn/ui
Right Side Sidebar Block for Svelte
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 Svelte with Ark 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.
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.