Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA file browser window with a sidebar, back and forward navigation, icon and list views, multi-select, keyboard navigation and a path bar.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
root | FinderNode | - | Top of the file tree: a folder or drive whose children can be browsed. |
sidebar | FinderSidebarSection[] | - | Sidebar sections. Each item opens the folder with that id. |
defaultFolder | string | root | Id of the folder to start in. |
view | "icons" | "list" | "icons" | Initial view. List shows date and size. |
onOpenFile | (file: FinderNode) => void | - | Called when a file is opened with double-click or Enter. |
onSelectionChange | (ids: string[]) => void | - | Called whenever the selection changes. |
Also accepts all <div> props.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Unique id. |
name | string | - | Name shown under the icon. |
kind | "folder" | "file" | "drive" | - | What it is. |
ext | string | - | Extension badge for files. |
tone | IconTone | - | Folder color, or the badge color of a file. |
size | string | - | Size text for list view. |
modified | string | - | Modified text for list view. |
children | FinderNode[] | - | Contents of a folder or drive. |
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Section heading. |
items | { id: string; label: string; icon: React.ReactNode }[] | - | Shortcuts. id is the folder each one opens. |
listbox with aria-activedescendant, so focus stays on the grid.