Floating Dock: Build Interactive and Animated Mac-like Docks with BuouUI
Floating Dock: Build Interactive and Animated Mac-like Docks with BuouUI
Looking for an elegant and interactive way to present navigation or actions on your UI? Meet the Floating Dock from BuouUI — a highly customizable component that mimics the familiar macOS Dock experience with smooth animations and flexible layouts.
Whether you're building a mobile web app, a dashboard, or a creative landing page, Floating Dock offers three major styles that give you full control over layout, motion, and interaction.
🧭 Three Powerful Dock Modes
The Floating Dock comes with three distinct modes, designed for different use cases and device types:
1. Fixed Bottom Dock
A clean, responsive dock that stays attached to the bottom of the screen — perfect for mobile-friendly navigation bars or quick-access tools.
2. Freestyle Floating Dock
Position it anywhere on the screen. Want a right-edge radial launcher or a floating center menu? This mode gives you total layout freedom.
3. Animated Dock with Hover & Scale
This is where the magic happens. When hovering over items, they magnify smoothly, with surrounding elements gently moving — just like the classic macOS Dock, but made for the web.
⚙️ Features Overview
| Feature | Description |
|---|---|
| 🧱 Multiple Dock Modes | Choose between fixed, floating, or animated dock styles |
| 🖱️ Hover Animations | Magnify icons on hover with buttery-smooth transitions |
| 🎨 Customizable Size & Shape | Adjust item size, dock radius, padding, and layout freely |
| 🧩 Drop-In Integration | Built with Tailwind CSS and Framer Motion, works with any component inside |
| 🔧 Drag or Fixed Position | Floating mode supports manual positioning and snapping |
👀 Live Demo
Ready to see it in motion?
👉 Floating Dock
Hover over icons, change dock modes, and test the interactions live in the playground.
🧠 Final Thoughts
Whether you’re building a mobile menu, a floating tool palette, or an interactive nav bar — Floating Dock gives you a powerful set of tools to create immersive, touch-friendly, and beautifully animated experiences.
Like all BuouUI components, it works seamlessly in BuouNext and BuouAI, giving your project a polished and production-ready feel with minimal effort.
Start building delightful, Mac-like UIs — with Floating Dock.