A column file browser where each folder opens in a new column to the right, with breadcrumbs, full arrow key navigation and a preview pane. The preview renders highlighted source, image art, a playable waveform, a spreadsheet grid or a document page depending on the file.
npx shadcn@latest add https://hyperblur.dev/r/app-file-explorer.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-file-explorer.tsx.
import { AppFileExplorer } from "@/components/hyperblur/app-file-explorer"
<AppFileExplorer onOpen={(node) => console.log(node.name)} />| Prop | Type | Default | Description |
|---|---|---|---|
| tree | ExplorerNode[] | sample repository | Nodes with id, name, kind (folder, code, image, doc, sheet, pdf, audio) and optional size, modified, children, lines (code), tint and dimensions (image) and duration (audio). |
| rootLabel | string | "harbor-mobile" | Name of the root shown first in the breadcrumbs. |
| path | string[] | Controlled list of selected ids, one per column. Pair with onPathChange. | |
| defaultPath | string[] | ["src", "components", "button"] | Initial selection when uncontrolled. |
| onPathChange | (path: string[]) => void | Called whenever the selection or folder changes. | |
| onOpen | (node: ExplorerNode) => void | Called by double click, Enter or the Open button. | |
| onShare | (node: ExplorerNode) => void | Called by the Share button in the preview pane. | |
| accent | string | "#2f7bff" | Color of the active selection and focus rings. |