RetroItem

A flexible row for lists, settings and file browsers: media, title, description and actions, in default, outline and muted Mac OS 9 styles.

Installation

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

Usage

<RetroItem variant="outline">
  <RetroItemMedia><RetroIconHardDrive /></RetroItemMedia>
  <RetroItemContent>
    <RetroItemTitle>Macintosh HD</RetroItemTitle>
    <RetroItemDescription>4.2 GB available</RetroItemDescription>
  </RetroItemContent>
  <RetroItemActions>
    <RetroButton size="sm">Open</RetroButton>
  </RetroItemActions>
</RetroItem>

Variants

Default

Transparent row that blends into its container.

Outline

Framed with a black border and a soft raised bevel.

Muted

Platinum fill for secondary or grouped rows.

Media

Macintosh HD

4.2 GB available of 8 GB

Untitled Disk

Group with Separators

System Folder

folder

212 MB

SimpleText

application program

528 K

Read Me

SimpleText document

12 K

As Link

Control Panels

Adjust Appearance, Memory, Monitors and Sound.

Header and Footer

UpdateMac OS 9.2.2
Software Update

Improves stability and compatibility with Mac OS X Classic environment.

23 MB
View sourceBack to overview