build69
build69  /  Components  /  Media & Files  /  FileBrowser

FileBrowser

v1.0.10Updated 27 Aug 2026

Two-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
DefaultOpen ↗
Why this is recommendedfilesbrowsertreefolders+2

The default, out-of-the-box FileBrowser.

Recommended for+14
  • File / document manager
  • Asset library
  • Backup browser
Tags+6
filesbrowsertreefoldersmediadefault
Features+4
  • 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)
Not recommended for−2
  • 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.

get_registry_item({ name: "FileBrowser" })

Usage

import { FileBrowser } from '@/components/media/file-browser';

<FileBrowser tree={tree} files={files} view="list" />

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

PropTypeRequired
tree

Folder tree

FolderNode[]yes
files

Files in current folder

FileItem[]yes
view

Right-pane view mode

'list' | 'grid'
labels

Override 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.

Partial<FileBrowserLabels>

Related