---
title: File Browser
description: A folder-aware browser that descends into common prefixes with a breadcrumb trail — driven by useFiles.
---

Lists a folder with `list({ delimiter })`, so common prefixes surface as folders you can click into. A breadcrumb trail tracks where you are, and cursor-based "load more" pages through large folders. On adapters that can't delimit, everything simply appears as files at the root.

<ComponentPreview name="file-browser/file-browser-basic" />

## Installation

<ComponentInstall name="file-browser" />

## Usage

```tsx lineNumbers
import { useFiles } from "files-sdk/react";

import { FileBrowser } from "@/components/files-sdk/file-browser";

export function Browser() {
  const files = useFiles({ endpoint: "/api/files" });

  return (
    <FileBrowser
      files={files}
      initialPrefix="photos/"
      onSelect={(file) => console.log(file.key)}
    />
  );
}
```

Folders come straight from `list()`'s `prefixes`, which the gateway returns whenever the adapter [supports a delimiter](/ui/server/gateway). The component owns its own navigation state; pass `onSelect` to react to file clicks (open a preview, generate a share link, etc.).

## Props

<AutoTypeTable
  path="registry/files-sdk/file-browser/file-browser.tsx"
  name="FileBrowserProps"
/>