RetroAspectRatio
Maintains a fixed width-to-height ratio for media containers with optional OS 9 inset border.
Installation
npx shadcn@latest add "https://nostalgia-ui.com/r/retro-aspect-ratio.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 { RetroAspectRatio } from "@/components/ui/retro-aspect-ratio"Maintains a consistent width-to-height ratio for its children. Built on Radix UI AspectRatio. Useful for images, videos, and media containers.
16:9 Ratio
16:9
4:3 Ratio
4:3
1:1 Ratio (Square)
1:1
Bordered (OS9 inset border)
16:9 bordered
16:9 bordered
4:3 bordered
4:3 bordered
The bordered prop adds an OS9-style inset border around the content.