Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA lazily loaded storage tree with a collapse-all button, a loaded-items count and per-folder retry. Use this when people browse remote storage where each folder is a request that can be slow or fail.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for S3-style buckets, repository browsers and remote drives where listing a folder costs a request.
Do not use it when the whole listing is available up front (use file-explorer), or when you need search across everything (the unloaded folders cannot be searched).
It composes button, async-tree, tree-view, which the CLI installs for you.
import { CloudBucketBrowser } from "@/components/cloud-bucket-browser"<CloudBucketBrowser
buckets={[{ id: "assets", label: "assets-prod", hasChildren: true }]}
list={async (prefix) => {
const res = await fetch(`/api/list?prefix=${prefix.id}`)
if (!res.ok) throw new Error("list failed")
return res.json()
}}
/>| Prop | Type | Default | Description |
|---|---|---|---|
buckets | TreeNode[] | - | Top level. Mark them hasChildren: true. |
list | (prefix) => Promise<TreeNode[]> | - | Load one prefix; reject to show Retry. |
aria-label | string | "Storage" | Names the tree. |
aria-busy with a spinner; start, finish and failure are announced.The pattern ships with a Testing Library test (cloud-bucket-browser.test.tsx) that covers listing on first open, collapse all and the failure and retry path.