iPod

The classic iPod: white shell, LCD screen and a working click wheel.

▶Now Playing

1 of 11

Vertigo

U2

How to Dismantle an Atomic Bomb

1:14-2:00
installnpx shadcn@latest add @aqua/ipod

Usage

import { ClickWheel, IPod, IPodHeader, IPodScreen } from "@/components/ui/ipod"

<IPod>
  <IPodScreen>
    <IPodHeader>Now Playing</IPodHeader>
    <div className="px-4 py-3 text-center text-[13px]">
      <p className="font-bold">Vertigo</p>
      <p>U2</p>
    </div>
  </IPodScreen>
  <ClickWheel
    onPlayPause={togglePlayback}
    onPrev={previousTrack}
    onNext={nextTrack}
  />
</IPod>

The screen takes any content: menus, album art, a game of Brick. Every wheel button and the center click accept a handler.