RetroIconView

A Finder icon view grid with click, shift and command selection, arrow-key navigation, open on double-click and inline rename.

Installation

npx shadcn@latest add "https://nostalgia-ui.com/r/retro-icon-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 { RetroIconView } from "@/components/ui/retro-icon-view"

Usage

<RetroIconView
  aria-label="Macintosh HD"
  items={items}
  onOpen={(item) => open(item)}
  renamable
  onRename={(item, label) => rename(item.id, label)}
/>

Finder Icon View

Click to select, Shift-click for a range, Cmd/Ctrl-click to toggle. Arrow keys move through the grid. Double-click or Cmd+O opens. Press Return or F2 (or click a selected label again) to rename.

Macintosh HD
Applications
Documents
System Folder
SimpleText
Read Me
Letter to Steve
LaserWriter 8
Trash

Selected: docs · Last opened: none

Single selection, wide cells

Macintosh HD
Applications
Documents
System Folder
SimpleText