Floating Dock
macOS-style dock with magnification effect on hover.
Preview
Floating Dock
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Quick-access tool bars and app launchers.
Why this component matters
The magnification effect gives physical feedback, making icon-based navigation feel intuitive.
Usage guidance
Use for 5-8 primary actions or links. Place at the bottom of the viewport. Each dock item should have a clear, recognizable icon.
Installation
bash
npx shadcn@latest add @aceternity/floating-dockUsage
example.tsxtsx
import { FloatingDock } from "@/components/ui/floating-dock";
export default function Example() {
return (
<FloatingDock>
{/* Your content here */}
</FloatingDock>
);
}Source
floating-dock.tsx
components/ui/floating-dock.tsx