DocsnavigationDock

Dock

A dock that magnifies the icon under the pointer, the way a desktop one does.

Palette
Calamansi

Glide along the dock

Each icon measures its distance from your pointer and springs to meet it.

Home selected

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/dock

How to use

demo.tsx
import { Dock, DockItem } from "@/components/ui/dock"
import { House, Search, Heart } from "lucide-react"
export function Demo() {
  return (
    <Dock>
      <DockItem label="Home">
        <House className="size-6" />
      </DockItem>
      <DockItem label="Search">
        <Search className="size-6" />
      </DockItem>
      <DockItem label="Saved">
        <Heart className="size-6" />
      </DockItem>
    </Dock>
  )
}

Props

Options you can pass to customize this component.

  • children*required
    ReactNode

    DockItem elements.

  • reachoptional
    number

    How far from the pointer, in pixels, an item starts growing.

  • sizeoptional
    number

    Item size at rest, in pixels.

  • magnifyoptional
    number

    Item size under the pointer, in pixels.

  • panelHeightoptional
    number

    Fixed height of the dock border box in pixels. Defaults to size + 16.

  • variantoptional
    whitecalamansislatecitrus

    Surface palette. Calamansi is the default slab; White is white in light mode and near-black in dark.

  • classNameoptional
    string

    Extra classes merged onto the dock.

  • labeloptional
    string

    DockItem only. The label shown above the item on hover.

  • onClickoptional
    () => void

    DockItem only. Called when the item is pressed.

Dependencies

motion

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousNumber ticker
NextDynamic island