RetroCard

A Windows 95 style beveled card with optional window styling and animated borders.

Preview

Default card with beveled borders

Inset style (like input fields)

Window

Windows 95 style!

Installation

npx shadcn@latest add https://retro90s.dev/r/retro-card.json

Usage

import {
  RetroCard,
  RetroCardHeader,
  RetroCardTitle,
  RetroCardContent
} from "@/components/ui/retro-card"

export function MyComponent() {
  return (
    <RetroCard variant="window">
      <RetroCardHeader>
        <RetroCardTitle>My Window</RetroCardTitle>
      </RetroCardHeader>
      <RetroCardContent>
        Content goes here
      </RetroCardContent>
    </RetroCard>
  )
}

Variants

Default

Classic beveled look

variant="default"

Inset

Recessed input field style

variant="inset"

Window

Window Title

Windows 95 dialog style

variant="window"

Animated Border

Marquee lights animation!

Use animated prop for rainbow border lights

With Footer

Confirm Action

Are you sure you want to proceed?

Props

Prop	Type	Default
variant	"default" \| "inset" \| "window"	"default"
animated	boolean	false