shadcn.io is not affiliated with official shadcn/ui
File Browser Carousel Block for React Aria
Six document-vault folders on a one-up track, a breadcrumb that jumps back to any folder, sub-folder rows that open the next slide with focus on its first row, and file rows that select without opening.
Installation
Overview
Browse a folder tree one folder at a time, with this file browser carousel for React with React Aria. Filebrook, a document vault, keeps six folders on a one-up track: Home, Projects, Aster launch, Personal, Taxes 2025 and Archive, in the order you meet them when you open each sub-folder in turn. A folder slide lists its sub-folders first, then its files with a type icon, a name, a size and a fixed modified date, under a summary such as "4 files, 2.1 MB" that adds up everything beneath it. A breadcrumb band above the track (Home, Projects, Aster launch) is a row of Buttons that jump back to that folder's slide, and opening a sub-folder moves the track to its slide and puts focus on its first row. Choosing a file says "Selected notes.txt, 12 KB" in the foot and opens nothing; the foot also holds a dot for each folder and Previous and Next buttons that stay in the tab order at the ends. The empty Archive folder uses the Empty state at the same height as the others. The ruled bands come from Guides. The product, the folders and the files are made up for the example.
FAQ
How do I use my own folders?
Edit FOLDERS. Each folder has an id, a name, a parent (an empty string for the root) and its files, and each file has a kind (text, sheet, pdf or image), a size in kilobytes and an ISO modified date. Keep the list in depth-first order, so a folder is followed by the folders inside it. Sizes, item counts, the breadcrumb and the summary line are all derived from this list, so nothing is typed twice.
How does the breadcrumb work?
It lists the folders from Home down to the open one. Every name but the last is a button that jumps straight to that folder's slide and moves focus to its first row; the last name is plain text marked as the current page. Because the slides are fixed, going back never removes anything: the folders you left are still on the track.
How does it work with a keyboard?
Tab reaches the breadcrumb, the rows of the open folder, the dots and Next and Previous. Enter or Space on a sub-folder opens it and lands focus on the first row of the new slide (or its heading when the folder is empty); on a file it selects it. With focus inside the track, the arrow keys move between folders (mirrored in a right-to-left layout) and Home and End jump to the first and last folder. Folders out of view are hidden from the tab order and from screen readers.
What is announced when it moves?
The foot is the block's one polite live region. It reads "Folder 3 of 6: Aster launch" after a move, and "Selected notes.txt, 12 KB" after you choose a file in the open folder.
What stays local in the demo?
Everything. The files are typed example data, selecting one only highlights it, and nothing is uploaded, downloaded or fetched. To wire it for real, load each folder's listing from your storage API into FOLDERS (or fetch a folder when its slide opens), and open the file in your own viewer from the selected row.
How does it look on a phone?
One folder fills the width. The modified date column drops out to leave the name, the size and the chevron, the breadcrumb wraps onto a second line if a path is long, and the counter and buttons share the first line of the foot with the dots on a line below. The track follows a finger.