RetroTreeView

Installation

npx shadcn@latest add "https://nostalgia-ui.com/r/retro-tree-view.json"

Setup: installing any component also installs nostalgia-theme (the --os9-* tokens and os9-* utilities) via registryDependencies. To add the theme on its own: npx shadcn@latest add https://nostalgia-ui.com/r/nostalgia-theme.json

Import

import { RetroTreeView } from "@/components/ui/retro-tree-view"

Usage

<RetroTreeView
  aria-label="Macintosh HD"
  items={items}
  columns={[
    { key: "label", header: "Name" },
    { key: "modified", header: "Date Modified", width: 150 },
    { key: "size", header: "Size", width: 70, align: "right" },
    { key: "kind", header: "Kind", width: 140 },
  ]}
  defaultSort={{ column: "label", direction: "asc" }}
  selectionMode="multiple"
  onActivate={(node) => open(node)}
/>