Dock

New

Icons that swell as the pointer passes, like a desktop dock

$ npx @hritik-sharmaa/repeat-ui add commons-dock

Live preview

Customize

Size48px

Magnification1.7×

Distance140px

Background

Tiles

Icons

Dot

Labels

Dot indicator

import CommonsDock from "@/components/repeat-ui/commons-dock/preview";

<CommonsDock items={items} />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add commons-dock --variant ts-tailwind

The files are in components/repeat-ui/commons-dock/.

import CommonsDock from "@/components/repeat-ui/commons-dock/preview";

export default function Page() {
  return <CommonsDock />;
}

Prop	Type	Default	Description
`items`	`DockItem[]`	-	Tiles: { label, icon, onClick? }. Icons are sized to the tile; SVGs fill 46% of it.
`baseSize`	`number`	48	Tile size at rest, in pixels.
`magnification`	`number`	1.7	How much the nearest tile grows.
`distance`	`number`	140	How far the pointer's pull reaches, in pixels.
`background`	`string`	"rgba(23, 23, 23, 0.8)"	Dock background.
`tileColor`	`string`	"#262626"	Tile background.
`iconColor`	`string`	"#e5e5e5"	Icon colour; SVG icons using currentColor follow it.
`accentColor`	`string`	"#fa5f1b"	Colour of the dot under the last clicked tile.
`showLabels`	`boolean`	true	Show a label above the hovered tile.
`showIndicator`	`boolean`	true	Show a dot under the last clicked tile.
`className`	`string`	""	Extra classes for the root element.