Sidebar 04
NewA repository browser: a file tree in an off-canvas sidebar that works from the keyboard (arrows, Home, End, type-ahead), with the open file's path in the breadcrumb.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/sidebar-04.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Files
What the command adds to your project, and where.
app/sidebar-04/page.tsxThe page itself, at the route it is meant for. Move or rename it to suit your app.
components/sidebar-04/fernbank.tsxA component the page imports. Edit it freely.
components/sidebar-04/file-tree.tsxA component the page imports. Edit it freely.
components/sidebar-04/icons.tsxA component the page imports. Edit it freely.
components/sidebar-04/repo-data.tsA component the page imports. Edit it freely.
It also installs the components it is built from, unless you already have them: Avatar, Breadcrumb, Button, Dropdown Menu, Kbd, Separator, Sidebar.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Sidebar
- Sidebar 01An application shell: a collapsible sidebar with a workspace switcher, grouped navigation and a user menu, under a top bar with breadcrumb and search.
- Sidebar 02A floating sidebar: a detached, rounded panel with a gap around it, a search field in the header that filters the navigation, and a collapse to an icon rail.
- Sidebar 03An inset sidebar: the page is a raised card on the sidebar's own background, with collapsible spaces that nest folders and pages two levels deep.
- Sidebar 05A two-level sidebar: a slim rail of workspaces beside a panel of the selected workspace's channels and messages; collapsing keeps the rail.
- Sidebar 06A two-sided shell: navigation on the left and a toggleable details panel on the right, both of which turn into sheets on a phone.
- Sidebar 07A sidebar built around one action: a prominent New menu, recent files with times, G-then-letter shortcut hints on every link, and a storage meter above the account menu.
- Sidebar 08A reading app with the sidebar on the right: the essay sits in the middle, and an outline and your highlights, added by selecting text, sit beside it.
- Sidebar 09A task manager shell with live counters, collapsible sections and a pinned list the user puts in their own order by dragging or with Alt and the arrow keys.
- Sidebar 10A scheduling app shell: a month calendar and colour-coded calendar toggles in the sidebar, and the week as a time grid beside it, or as a list on small screens.
- Sidebar 11An admin console with sections in a top bar and a sidebar that shows only the pages of the current section, with its own groups, footer and breadcrumbs.
- Sidebar 12A quiet, text-first docs sidebar: a page tree with add-page buttons on hover, favourites, a trash you can restore from, and the whole sidebar slides away on toggle.