Dock

A macOS-style dock: icons magnify under the cursor with springs, show labels and running indicators.

Motion

Playground

Tweak the props, the preview and the code follow.

Props

size40

magnification64

distance140

import { Dock, DockItem } from "@/components/ui/dock"

<Dock>
  <DockItem label="Finder"><FolderOpen /></DockItem>
  <DockItem label="Mail"><Mail /></DockItem>
  …
</Dock>

Installation

npx @plumsydev/plum-ui add dock

Usage

import { Dock, DockItem, DockSeparator } from "@/components/ui/dock"

<Dock>
  <DockItem label="Mail" badge={3}>
    <Mail />
  </DockItem>
  <DockSeparator />
  <DockItem label="Trash">
    <Trash2 />
  </DockItem>
</Dock>

Examples

Tool picker

A compact dock as a design-tool toolbar, with keyboard shortcuts.

Press V, H, P, R, O or T

Magnification

Tune the magnification and the radius of influence.

Magnification72px

Distance140px

API Reference

Dock

Extends div, rendered as a toolbar.

Prop	Type	Default
`size` Resting icon size in px.	`number`	`40`
`magnification` Icon size right under the cursor.	`number`	`64`
`distance` Radius of influence in px.	`number`	`140`

DockItem

Extends motion.button.

Prop	Type	Default
`label*` Tooltip text and accessible name.	`string`	`—`
`active` Shows the running indicator and sets aria-pressed.	`boolean`	`false`
`badge` Small notification badge.	`ReactNode`	`—`

DockSeparator

A vertical divider between groups.

Notes

The dock keeps a fixed height; icons grow upward without pushing the layout.
Keyboard focus shows the label too.

PreviousDialog NextDrawer