Skip to main content

Overview

The Dock component provides a modern, floating application shelf inspired by macOS and iPadOS. It features smooth hover elevation, active indicators, and glassmorphism backdrop blurs.

Example Dock

<!-- Inline or pinned bottom dock -->
<div class="dock">
  <button type="button" class="dock-item active" title="Files">
    <span>📂</span>
  </button>
  <button type="button" class="dock-item" title="Terminal">
    <span>💻</span>
  </button>
  <div class="dock-divider"></div>
  <button type="button" class="dock-item" title="Settings">
    <span>⚙️</span>
  </button>
</div>

<!-- Screen-pinned bottom dock -->
<div class="dock-container">
  <div class="dock">
    <!-- Dock items -->
  </div>
</div>