RetroInputGroup

A Mac OS 9 inset text well that combines an input or textarea with icons, text, buttons and shortcuts. The whole well takes the focus ring.

Installation

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

Usage

<RetroInputGroup>
  <RetroInputGroupInput placeholder="Search…" />
  <RetroInputGroupAddon>
    <RetroIconSearch size="sm" />
  </RetroInputGroupAddon>
</RetroInputGroup>

Icon Addon

Text Addons

http://
$
USD
.sit

Buttons

Keyboard Hint & Loading

⌘F
Loading...

Textarea with Block Addons

SimpleText — Read Me
0 / 32K

Invalid

@
View sourceBack to overview