Components

Dock

A bottom dock whose items swell as the cursor nears them — each item's size is a transform of the cursor's distance from its center.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add dock

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Dock, DockItem } from "@lumora/ui/components/dock";
// or from the barrel:
import { Dock, DockItem } from "@lumora/ui";

Props worth knowing

magnification sets the peak scale under the cursor (default 1.7). Each DockItem needs a label (its tooltip) and an optional size in px; items magnify with cursor proximity and hold still under reduced motion. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.