Skip to content
Display

FileTree

Files and folders, like an export or a repo.

import { FileTree } from "@flinbu/seed";

An export

  • css
  • tokens.css14 KB
  • tokens.dark.css9 KB
  • tailwind
  • theme.css6 KB
  • tokens.json38 KB
import { FileTree } from "@flinbu/seed";
import { FileJson } from "lucide-react";

const [sel, setSel] = React.useState<string | null>("css/tokens.css");

<div className="w-full max-w-xs rounded-xl border border-secondary bg-primary p-xs">
  <FileTree expandAll selected={sel} onSelect={setSel} aria-label="Export"
    items={[
      { name: "css", children: [{ name: "tokens.css", meta: "14 KB" }, { name: "tokens.dark.css", meta: "9 KB" }] },
      { name: "tailwind", children: [{ name: "theme.css", meta: "6 KB" }] },
      { name: "tokens.json", meta: "38 KB", icon: <FileJson /> },
    ]} />
</div>

Use it for

  • Previewing generated files; picking one to view.

Props

PropTypeDefaultDescription
items{ name, children?, meta?, icon? }[]–The tree.
selected / defaultSelectedstringnull–Path, like css/tokens.css.
onSelect(path: string) => void–Files only.
expanded / defaultExpandedstring[]–Open folders.
expandAllboolean–Opens every folder when uncontrolled.

Accessibility

  • The ARIA tree pattern: up and down move, right opens or goes in, left closes or goes to the parent, Enter selects; one tab stop.