Layout & Navigation Interactive Physics Smooth Magnification Lightweight Tailwind v4

Dock

macOS-inspired interactive dock with smooth pointer proximity magnification physics, hover tooltips, and app status dots.

Interactive Preview

Live Edit & Viewport Resizer

Variants:

Installation

Add the Dock component to your project via CLI:

terminal bash

npx plain-ui add dock

Features

✓ Fluid proximity scaling inspired by macOS desktop dock
✓ Floating glassmorphism container with backdrop blur
✓ Hover tooltip labels and active running app indicator dots
✓ Responsive auto-collapsing on mobile viewports

Variants & Examples

Compact Action Bar

Minimal floating editor action dock.

dock-compact-action-bar.html html

<div class="flex justify-center p-6">
  <div class="flex items-center gap-1.5 p-1.5 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-xl">
    <button class="p-2 rounded-lg text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:scale-110 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg></button>
    <button class="p-2 rounded-lg text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:scale-110 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></button>
    <button class="p-2 rounded-lg text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:scale-110 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101"/></svg></button>
  </div>
</div>

Attributes & Classes

Attribute / Prop	Type	Default	Description
aria-label	string	Application Dock	Accessible navigation label.

Accessibility & Keyboard Navigation

• Semantically tagged with <nav role='navigation'>.
• Supports full keyboard tab traversal with visual focus ring cues.

← Shimmer Button Bento Grid →