Premium & Brand

Dock

A macOS-style icon dock that magnifies items as the pointer nears.

Import

tsx

import { Dock } from "@cooud-ui/ui";

bash

npx cooud-ui add dock

Examples

App dock

A macOS-style icon dock: items magnify as the pointer approaches and settle back on a spring. Each item is named for assistive tech via its `label`; reduced-motion visitors get a static bar.

tsx

<Dock
  items={[
    { icon: <Home />, label: "Home" },
    { icon: <Search />, label: "Search" },
    { icon: <Bell />, label: "Notifications" },
    { icon: <User />, label: "Profile" },
    { icon: <Settings />, label: "Settings" },
  ]}
/>

API Reference

Generated from the component's exported types.

DockProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`items`*	`DockItem[]`	—	The dock entries, left to right.
`magnification`	`number`	`DEFAULT_MAGNIFICATION`	Peak scale an item reaches at the pointer's center. Defaults to `1.6`.
`baseItemSize`	`number`	`DEFAULT_BASE_ITEM_SIZE`	Resting item size in pixels. Defaults to `44`.
`distance`	`number`	`DEFAULT_DISTANCE`	Pointer influence radius in pixels — how far the magnify reaches. Defaults to `120`.