.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Bar Dock

image-galleryPro

A row of tall image bars that swell dock-style as the pointer nears; click or Enter opens one into a large square while the others blur and dim.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

bar-dock.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type BarDockProps = {  items: BarDockItem[]  barWidth?: number  barHeight?: number  gap?: number  magnification?: number  heightMagnification?: number  range?: number  radius?: number  openSize?: number  showCaption?: boolean  defaultOpen?: number  onOpenChange?: (index: number | null) => void  className?: string}export function BarDock({  items,  barWidth = 28,  barHeight = 170,  gap = 6,  magnification = 2.3,  heightMagnification = 1.3,  range = 180,  radius = 8,  openSize = 300,  showCaption = true,  defaultOpen,  onOpenChange,  className,}: BarDockProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Bar Dock is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

CLInpx shadcn@latest add @manniche-pro/bar-dock

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

BarDockProps

Prop	Type	Default	What it does
`items` required	`BarDockItem[]`	–	The pictures, one bar each. Roughly 5 to 14 look best.
`barWidth`	`number`	`28`	Width of a resting bar in CSS pixels. Bars shrink together on narrow containers so the whole row always fits.
`barHeight`	`number`	`170`	Height of a resting bar in CSS pixels.
`gap`	`number`	`6`	Space between bars in CSS pixels.
`magnification`	`number`	`2.3`	How much the bar nearest the pointer grows in width (1 = no magnification). Neighbours taper off smoothly.
`heightMagnification`	`number`	`1.3`	How much the nearest bar grows in height (1 = same height). Kept apart from `magnification` so bars can swell without getting much taller.
`range`	`number`	`180`	Distance in CSS pixels over which the pointer still has an effect. Bars further away stay at rest.
`radius`	`number`	`8`	Corner radius of the bars in CSS pixels.
`openSize`	`number`	`300`	Side of the square a bar opens into, in CSS pixels. It is capped to fit the container.
`showCaption`	`boolean`	`true`	Show the picture's `alt` text as a caption on the open bar.
`defaultOpen`	`number`	–	Index of the bar that starts open. Leave out to start with all bars closed.
`onOpenChange`	`(index: number \| null) => void`	–	Called when a bar opens (its index) or the open bar closes (`null`).
`aria-label`	`string`	`'Picture gallery'`	Accessible name of the whole row.
`className`	`string`	–	–

Preview

Code

The code is locked

Props

A11y

Keyboard

Screen reader

Reduced motion

Other