Dock
A macOS-style dock component with smooth magnification animations and glassmorphism effects. Perfect for navigation bars, quick access toolbars, and application launchers with an elegant, interactive design.
Preview
Installation
Features
- Magnification Effect: Icons smoothly scale up when the mouse approaches, mimicking macOS dock behavior
- Glassmorphism Design: Beautiful backdrop blur effects with semi-transparent backgrounds
- Dark Mode Support: Seamlessly adapts to light and dark themes with proper contrast
- Smooth Animations: Powered by Framer Motion with spring physics for natural movement
- Customizable Icons: Support for any React component or SVG icons
- Multiple Styles: Various dock styles including simple, colorful, minimal, floating, and authentic macOS designs
- Responsive Layout: Adapts to different screen sizes while maintaining functionality
- Accessibility Ready: Proper ARIA attributes and keyboard navigation support
Usage
After installing the component, import it into your page or component file. The dock consists of a main Dock container and individual DockIcon components.
Dock Variations
Simple Dock
A clean, minimal dock with basic navigation icons and subtle styling.
Colorful Dock
A vibrant dock with gradient backgrounds and colorful icons for a more playful design.
Minimal Dock
An ultra-minimal dock with no background, perfect for clean interfaces.
Floating Dock
A floating dock with enhanced shadow effects and rounded corners.
Basic Usage Examples
Simple Implementation
With Separator
With Click Handlers
API Reference
Dock Component
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | React.ReactNode | - | Yes | DockIcon components and separators to display in the dock |
DockIcon Component
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| href | string | - | Yes | URL or path for the icon link |
| children | React.ReactNode | - | Yes | Icon component or element to display |
| onClick | () => void | - | No | Optional click handler function |
| mouseX | MotionValue<number> | - | No | Internal prop for mouse tracking (automatically injected) |
Animation Properties
| Property | Value | Description | |----------|-------|-------------| | Icon Size | 36px | Default size of dock icons | | Magnification | 60px | Maximum size when magnified | | Distance | 140px | Mouse proximity distance for magnification | | Spring Config | mass: 0.1, stiffness: 150, damping: 12 | Animation spring physics |
Visual Effects
- Backdrop Blur: 16px blur effect with
backdrop-blur-lgclass - Glassmorphism: Semi-transparent backgrounds (white/80% in light, black/50% in dark)
- Border Styling: Subtle borders with 10% opacity for depth
- Rounded Corners: 16px border radius for modern appearance
Customization
Styling the Dock Container
You can customize the dock's appearance by modifying the classes in the Dock component:
Icon Styling
Style your icons with consistent classes for best results:
Theme Integration
The component automatically adapts to your theme system using CSS classes:
Color Variations
Create different color schemes for your dock:
Accessibility
The dock component follows accessibility best practices:
- Keyboard Navigation: All dock icons are focusable and can be activated with Enter or Space
- Screen Reader Support: Proper semantic HTML with meaningful link text
- ARIA Labels: Use
aria-labelortitleattributes for better screen reader experience - Focus Management: Clear focus indicators for keyboard users
- Color Contrast: Ensure sufficient contrast ratios for text and icons
Use Cases
Application Launcher
Perfect for creating desktop-style application launchers:
Navigation Bar
Use as a primary navigation component:
Quick Actions Toolbar
Ideal for frequently used actions:
macOS-Style Desktop
Perfect for creating desktop environments or OS interfaces:
Troubleshooting
Common Issues
Magnification not working: Ensure Framer Motion is properly installed and the mouseX prop is being passed correctly to DockIcon components.
Icons not displaying: Check that your icon components are properly imported and have the correct className props.
Performance issues: If you have many icons, consider optimizing by reducing the number of animated elements or adjusting spring physics values.
Theme not switching: Verify that your theme provider is properly configured and the dark/light mode classes are applied correctly.
Performance Optimization
For better performance with many dock icons:
Browser Compatibility
The dock component works in all modern browsers that support:
- CSS backdrop-filter (for glassmorphism effects)
- Framer Motion animations
- CSS transforms and transitions
For older browsers, consider providing fallbacks: