shadcn.io is not affiliated with official shadcn/ui
Dock Magnifier Features Block for Ark UI
A dock of eight tool tiles that grow with their distance from the pointer, under a detail card that follows the active tile, built on tabs so the arrow keys and a tap work too.
Installation
Overview
A magnifying dock for React with Ark UI. Eight tool tiles sit on a shelf; as the pointer moves along it, each tile grows by a bell curve of its distance from the pointer, so the one under it is largest and its neighbours ease back. A detail card above the dock shows the active tool: its icon, its name, the key to press and a sentence. The dock is a real tab list, so Tab enters it, the arrow keys move along it and select, keyboard focus magnifies a tile as the pointer does, and a tap selects. A hint line under the dock names the keys. The page's rails and top rule come from the Guides spine. It's built from Tabs, Badge and Guides, one CSS variable written by a pointer handler, and your theme's tokens for every colour. For creative tools, launchers and any toolbar worth showing off.
FAQ
How do I change the tools?
Edit TOOLS at the top of the file: each entry has an id, a name, an icon, the key shown in the badge and a text sentence. The curve is written for tiles in a row; the sizes at the top (TILE, GAP, PAD) and the dock's width class must match if you change their number.
How does the magnifying work?
A pointer handler on the dock writes one CSS variable, the pointer's place along the dock measured in tiles. Each tile knows its own index and works out its size in CSS: full size two tiles away, and growing to 1.7 times under the pointer. The place is measured on the dock's resting box, so tiles growing never move the pointer's place, and in a right-to-left layout it is measured from the other end.
Does it work without a pointer?
Yes. The dock is a tab list: Tab enters it, the left and right arrows move along it, and the tool you land on becomes the active one and shows in the detail card. Keyboard focus magnifies the focused tile just as the pointer does, and a tap on a phone or a click selects a tile.
What happens with reduced motion?
The tiles keep their size: the pointer handler does nothing and the size transition is off. The detail card still follows the active tile, so everything that carries meaning still works.