ns-ui

Dock Shelf Lean

A dock/toolbar where items lean like books on a shelf — hover or focus straightens one and cants its neighbors away, reorder is a pick-up/move/drop cycle, nothing ever scales.

Use when Use when a dock, favorites bar or pinned-item row needs a quieter emphasis mechanic than magnification — hover/focus straightens one item and leans its neighbors away by a few degrees, with a small breathing gap, so labels and hit areas never move except a 2px lift. Pick dock-cursor-magnify instead when cursor-proximity magnification and Gaussian falloff scale is the wanted effect; pick dock-shelf-lean when scale must stay fixed (stable hit targets, denser rows, a more restrained posture-only read) and when the row also needs first-class keyboard reordering.

Install

npx shadcn add https://design.helpmarq.com/r/dock-shelf-lean.json
  • nav
  • dock
  • toolbar
  • reorder
  • micro-interaction
  • accessibility

Props

PropTypeDefaultDescription
itemsShelfCantItem[]
label?stringaccessible name for the toolbar row itself
onReorder?(items: ShelfCantItem[]) => voidfires with the new order after every reorder step (swap or drop)
className?string