Sidebar 13 - Sidebar with file tree

Pro

A sidebar file explorer with a brand header, nested folders and files, chevron expanders, and a path-style breadcrumb in the main header.

Shadcn Sidebar 13 block

Component data

ID
sidebar13
Access
pro
Created
Jan 25, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Sidebar 13 block design & features

Sidebar13 is a file-tree sidebar built with Shadcn UI. The header is a brand lockup with logo tile, product name, and a short tagline. The body is a single Files group: a recursive tree of folders and files (src, components, ui, public, plus root files such as package.json). Folders show a chevron and an open or closed folder icon. Files show a document icon. The main header breadcrumbs a path like components / ui / button.tsx above a muted canvas.

Look at the rows and you get a compact, monochrome explorer. Folder icons stay muted. Chevrons rotate as branches open. The tree can use the full rail height. A scroll area covers deep nests. The surface is the default sidebar, not a dark editor theme.

This sits in an IDE or project-browser aesthetic, which is a fresh take next to the app-nav sidebars in the same set. Complexity is moderate and content-driven: the block only works if you feed it a real directory. The nesting itself is code-driven.

Nested folders indent as submenus. The breadcrumb grows with the selected path and hides earlier crumbs on narrow viewports.