MagneticDock — magnetic-dock

PREVIEW

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"