RetroButtonGroup

Joins buttons, inputs and labels into one Mac OS 9 control strip with shared borders. Horizontal or vertical, with etched separators and text segments.

Installation

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

Usage

<RetroButtonGroup>
  <RetroButton>Icon</RetroButton>
  <RetroButton>Button</RetroButton>
  <RetroButton>List</RetroButton>
</RetroButtonGroup>

Horizontal

Vertical

Sizes

With Separator

With Text and Input

afp://

Nested Groups

Disabled Segment

View sourceBack to overview