macOS-style dock with cursor magnification: icons scale and spring as the pointer passes, with hover and focus labels. Built on motion.
'use client';
import { Dock, DockItem, DockLabel } from '@/components/ui/dock';
import { Calendar, Folder, Home, Mail, Music, Settings } from 'lucide-react';
export default function DockDemo() {
const APPS = [
{ key: 'home', label: 'Home', icon: Home },
{ key: 'files', label: 'Files', icon: Folder },
{ key: 'mail', label: 'Mail', icon: Mail },
{
key: 'calendar',
label: 'Calendar',
icon: Calendar,
},
{ key: 'music', label: 'Music', icon: Music },
{
key: 'settings',
label: 'Settings',
icon: Settings,
},
];
return (
<div className="flex w-full max-w-xl items-end justify-center pt-12">
<Dock>
{APPS.map((app) => (
<DockItem key={app.key} aria-label={app.label}>
<DockLabel>{app.label}</DockLabel>
<app.icon />
</DockItem>
))}
</Dock>
</div>
);
}
Part of Hirael — browse the full library on 21st.dev.