Dock

A premium, macOS-inspired navigation dock featuring real-time physics magnification, floating label tooltips, active application indicators, and notification badges. Highly customizable via direct layout and physics props, it adapts seamlessly between desktop floating tooltips and touch-safe mobile layouts.

Sweep the cursor across each dock to feel the magnification curve, and click an icon to move the active indicator.

Dock

Passitems: as { id, label, icon }[] — label is the hover tooltip and icon a node, not a name.
containerHeight{64}: sizes the glass bar; a number is pixels, a string is raw CSS.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Two builds, same props and file — install one.

Install Dock

npx shadcn@latest add @algorize-ui/dock

components/custom/blocks/DockBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Dock to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

gsap is an npm package.

npm install gsap

Examples

Badges & active app

badge: on an item prints a pulsing counter pill in its top-right corner.
isActive: draws the running-app dot beneath the icon.

Features

Discover the key capabilities that make this component an excellent choice for modern, animated user interfaces.

Fluid Animations

Hardware-accelerated transitions that ensure smooth 60fps performance across devices.

Highly Customizable

Exposes intuitive props for tailoring colors, sizes, and animation speeds to fit your brand.

Responsive Design

Automatically adapts to mobile, tablet, and desktop viewports without horizontal scrolling issues.

Accessible

Built with semantic HTML and ARIA labels where necessary to support screen readers and keyboard navigation.

Best Practices & Guidelines

Animation Performance

Avoid placing too many heavy animated components on a single screen to prevent layout thrashing and maintain 60fps performance. Use intersection observers to pause off-screen animations.

State Management

When triggering animations via state changes, ensure you wrap state updates in startTransition or use lightweight stores to prevent React rendering bottlenecks during the animation tick.

Props Reference

Component / Interface	Prop	Type	Default	Description
`Dock`	`items`	`DockItem[]`	Required	An array of data objects defining the icons, labels, onClick callbacks, badges, and active states for each item.
`Dock`	`containerHeight`	`number \| string`	`64`	The height of the glassmorphic background bar (in pixels if passed as a number, or valid CSS string e.g., `"4.5rem"`).
`Dock`	`gap`	`number`	`12`	The horizontal gap spacing (in pixels) between resting dock icon buttons. Automatically compresses on mobile viewports.
`Dock`	`baseSize`	`number`	`48`	The resting width and height (in pixels) of each dock icon button before any hover interaction occurs.
`Dock`	`magnification`	`number`	`80`	The maximum expanded width and height (in pixels) an icon reaches when the mouse cursor is directly over its center.
`Dock`	`distance`	`number`	`140`	The pixel distance radius around the mouse cursor within which neighboring icons will begin to magnify.
`Dock`	`className`	`string`	`undefined`	Custom Tailwind CSS classes to apply to the outermost glassmorphic dock wrapper container.
`DockItem`	`id`	`string`	Required	A unique identifier string required for safe React list rendering and layout animations.
`DockItem`	`label`	`string`	Required	The text displayed inside the floating tooltip tag above the icon when hovered.
`DockItem`	`icon`	`React.ReactNode`	Required	A React element or Lucide icon component to render inside the button (should use classes like `w-full h-full`).
`DockItem`	`onClick`	`() => void`	`undefined`	Optional callback function fired whenever the user clicks on the specific dock icon button.
`DockItem`	`isActive`	`boolean`	`false`	When set to `true`, displays a smooth animated dot indicator beneath the icon button.
`DockItem`	`badge`	`string \| number`	`undefined`	Optional notification badge string or number (e.g., "3", "NEW") rendered as a pulsing red pill in the top-right corner.