FileBrowser
v1.0.26Updated 21 Oct 2026Two-pane file browser: nested folder tree on the left, file table / grid on the right. Drag to move, right-click for actions.
Preview
Live · 13 stories▸Why this is recommendedfilesbrowsertreefolders+2
The default, out-of-the-box FileBrowser.
- ✓File / document manager
- ✓Asset library
- ✓Backup browser
- Nested folder tree with expand/collapse
- Right pane: table or grid view of files
- Selection (single + multi)
- Right-click context menu
- Drag-to-move
- Breadcrumb path
- Search / filter
- Upload zone
- Preview pane (optional)
- i18n: labels prop overrides every built-in UI string (sidebar, toolbar, sort/filter menus, bulk bar, context menu, empty states, preview pane, aria-labels)
- ✕Flat lists (use DataTable)
- ✕Email inbox (use EmailThreeColumn)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
treeFolder tree
yesfilesFiles in current folder
yesviewRight-pane view mode
—onBulkActionRun a bulk action on the ticked files. WITHOUT it the selection bar shows the count and Clear only — the five action buttons used to render with no handler at all and did nothing when pressed.
—onRenameA file was renamed in place. The new name shows straight away, but that is a local echo replaced whenever a fresh `files` array arrives — without this the rename was never told to anybody and vanished on the next parent render.
—onUploadThe sidebar Upload button was pressed; the component holds no files of its own, so the host opens its picker or upload flow from here, and without this prop the button is still shown but does nothing.
—onFolderSelectA folder was chosen (its tree row clicked or activated with Enter or Space, or the breadcrumb that names it pressed); the component loads no folders of its own, so the host swaps `files`, `breadcrumbs` and `activeFolderId` from here, and without this prop a branch row still opens and closes but choosing a folder reports nothing.
—activeFolderIdControlled current folder: its tree row takes the selected styling and the tree's tab stop, and when set it overrides every `FolderNode.active` flag in `tree` (leave it out to mark the current folder there instead).
—onFilesDropFiles were dropped on the drop overlay; the component uploads nothing itself, so the host receives the dropped files here, and without this prop the overlay still opens and closes but the files go nowhere.
—labelsOverride any built-in UI string — sidebar, toolbar, sort/filter menus, bulk bar, context menu, empty states, preview pane, drop overlay, aria-labels (i18n). Merged over DEFAULT_FILE_BROWSER_LABELS; {token} templates for parameterized strings. The ticked-files bar is the shared BulkActionBar since fb_ceedac5b, and FileBrowser passes it selectedCount, clearSelection and the bulkActions landmark name from this bag, so one translation still covers the whole component.
—