Floating Dock
An elegant macOS-style floating dock with magnetic hover effects and smooth animations for navigation and quick actions.
Pro features
What the Pro version adds to this component.
Magnetic Hover Effects
Smooth macOS-style magnification that responds to mouse proximity with realistic physics
Flexible Positioning
Place dock at any screen edge (top, bottom, left, right) with automatic layout adaptation
Smooth Animations
Buttery-smooth spring animations powered by Framer Motion with customizable timing
Active State Indicators
Visual feedback for active/current items with customizable styling options
Smart Tooltips
Context-aware tooltip positioning that adapts to dock placement and screen boundaries
Customizable Effects
Fine-tune magnification strength, trigger distance, and animation behavior to match your design
Installation
Install via CLI
npx @moontra/moonui-cli add floating-dockUsage
Examples
Basic Floating Dock
Simple dock with essential navigation items positioned at the bottom center.
App Launcher Dock
Dock with multiple app icons, including an active state indicator.
Different Sizes
Compare small, medium, and large dock sizes.
Different Positions
Dock can be positioned at different edges of the screen.
Custom Magnification
Adjust the magnification effect for different visual impacts.
Interactive Actions
Dock items with click handlers and interactive feedback.
Social Media Dock
Real-world example for social media application navigation.
Without Tooltips
Dock without tooltip labels for a cleaner look.