RetroSeparator

A horizontal or vertical divider line with the classic Mac OS 9 beveled light-and-dark effect.

Installation

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

Horizontal (default)

Content above the separator

Content below the separator

Multiple Horizontal

Section One

Section Two

Section Three

Vertical

File
Edit
View
Help

Full Width

The classic OS9 beveled line: dark pixel on top (or left), light pixel on bottom (or right).

View sourceBack to overview