Dock

The translucent shelf: magnifying items, hover labels and running indicators.

FinderFinder
MailMail
SafariSafari
iTunesiTunes
iChatiChat
GarageBandGarageBand
System PreferencesSystem Preferences
TrashTrash
installnpx shadcn@latest add @aqua/dock

Usage

import { Dock, DockIcon, DockItem } from "@/components/ui/dock"

<Dock>
  <DockItem label="Finder" active>
    <img src="/icons/finder.png" alt="Finder" width={58} height={58} />
  </DockItem>
  <DockItem label="iTunes">
    <DockIcon>♪</DockIcon>
  </DockItem>
</Dock>

DockItem takes any icon content. Era app icons are freeform artwork, so drop an <img> straight in; DockIcon is the glossy rounded tile for when you don't have artwork. active shows the running-app dot.