.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

Eine Reihe hoher Bildbalken, die wie in einem Dock anschwellen, wenn sich der Mauszeiger nähert. Klick oder Enter öffnet einen zu einem großen Quadrat, während die anderen verschwimmen und abdunkeln.

Bald verfügbar

Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.

Breite

Die Vorschau konnte nicht geladen werden.

Live-Demo. Das Theme schaltet die Demo selbst um.

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)} />}

Der Code ist gesperrt

Bar Dock gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.

Bald verfügbar

49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.

Einmalzahlung
Ein Entwickler
Der Schlüssel kommt sofort per E-Mail
Keine Umsatzsteuer (§ 19 UStG)

Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.

Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein

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	Typ	Standard	Was sie tut
`items` erforderlich	`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`	–	–

Vorschau

Code

Der Code ist gesperrt

Props

A11y