Dock
dockDisplays magnifying icon shortcuts along an animated application dock.
Usage
Basic usage
DockIcon package icon, when the mouse is close to it, the icon will be enlarged according to the horizontal distance (macOS magnification dock effect).
<Dock>
<DockIcon><Home className="size-5" /></DockIcon>
<DockIcon><Search className="size-5" /></DockIcon>
<DockIcon><Bell className="size-5" /></DockIcon>
<DockIcon><Settings className="size-5" /></DockIcon>
<DockIcon><User className="size-5" /></DockIcon>
</Dock>Stronger amplification
magnification increases the peak size and distance increases the range of influence to obtain a more exaggerated amplification effect.
<Dock magnification={84} distance={160}>
<DockIcon><Home className="size-5" /></DockIcon>
<DockIcon><Search className="size-5" /></DockIcon>
<DockIcon><Bell className="size-5" /></DockIcon>
</Dock>Custom resting size
iconSize Sets the base size when not hovering, adapting to more compact or looser docks.
<Dock iconSize={32}>
<DockIcon><Home className="size-4" /></DockIcon>
<DockIcon><Search className="size-4" /></DockIcon>
<DockIcon><Settings className="size-4" /></DockIcon>
</Dock>When to use
Use Dock for a floating row of shortcuts along the bottom or side of a page. Icons enlarge elastically as the pointer approaches, creating a macOS-like effect suited to portfolios, personal sites, and desktop-inspired interfaces. Use Navbar for conventional site navigation, or Menu and Menubar for functional action menus.
Import
import { Dock, DockIcon } from "@hulianui/ui"Props
Dock
| Name | Type | Default | Description |
|---|---|---|---|
| magnification | number | 64 | Peak icon size in pixels when the pointer is closest. |
| distance | number | 140 | Radius of the magnification influence in pixels. |
| iconSize | number | 40 | Resting icon size in pixels. |
| className | string | — | Additional class name. |
DockIcon
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional class name. |
Slots
Dock
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | A set of DockIcon elements. |
DockIcon
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content of one icon. |
Example
<Dock>
<DockIcon><Home className="size-5" /></DockIcon>
<DockIcon><Search className="size-5" /></DockIcon>
<DockIcon><Settings className="size-5" /></DockIcon>
</Dock>Usage guidelines
- Native macOS and Tauri system-Dock caveats do not apply to this React component.
- Magnification depends on the
mouseXvalue distributed through context and animated with Motion springs, so it is a client-side interaction. Give icon artwork a consistent fixed size such assize-5so every item scales uniformly.
Related
Navbar · BeianFooter · NavMenu · NavigationMenu · Menu · Menubar