← DOCS
navigation

MagneticDock

Dock with magnetic attraction and spring physics for smooth animations.

npx chaos add magnetic-dock

PREVIEW

M
A
G

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { MagneticDock } from '@oalacea/chaosui/navigation/magnetic-dock';

const items = [
  { id: 'home', icon: <HomeIcon />, label: 'Home' },
  { id: 'search', icon: <SearchIcon />, label: 'Search' }
];

<MagneticDock items={items} />
<MagneticDock items={items} magneticStrength={0.5} variant="neon" />

PROPS

PropTypeDefault
itemsDock items {id, label?, icon?, href?, onClick?, active?, disabled?}
MagneticDockItem[]-
positionPosition of the dock
"bottom" | "top" | "left" | "right""bottom"
magneticStrengthMagnetic strength (0-1)
number0.3
stiffnessSpring stiffness for animation
number0.1
dampingDamping for animation
number0.8
sizeDock size variant
"small" | "medium" | "large""medium"
iconOnlyIcon-only mode
booleanfalse
variantStyle variant
"glass" | "solid" | "neon" | "brutal""glass"