.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}

Peek Link

buttonPro

An inline link whose own preview image rises, fades and leans toward the cursor on a spring.

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.

peek-link.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type PeekLinkProps = {  children: React.ReactNode  preview: PeekLinkPreview  previewWidth?: number  previewHeight?: number  previewRadius?: number  shadow?: boolean  shadowColor?: string  textColor?: string  underlineColor?: string  previewOnTouch?: boolean  spring?: { stiffness?: number; damping?: number }  ref?: Ref<HTMLAnchorElement>  className?: string}export function PeekLink({  children,  preview,  previewWidth = 240,  previewHeight = 150,  previewRadius = 14,  shadow = true,  shadowColor = 'rgb(0 0 0 / 0.38)',  textColor,  underlineColor,  previewOnTouch = false,  spring,  ref,  className,}: PeekLinkProps) {  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

Peek Link 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/peek-link

MCP

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

PeekLinkProps

Prop	Type	Default	What it does
`children` required	`React.ReactNode`	–	The link text.
`preview` required	`PeekLinkPreview`	–	The picture that floats above the link on hover or keyboard focus.
`previewWidth`	`number`	`240`	Preview width in CSS pixels. It shrinks on screens narrower than this.
`previewHeight`	`number`	`150`	Preview height in CSS pixels. Keeps its ratio when the width shrinks.
`previewRadius`	`number`	`14`	Corner radius of the preview in CSS pixels.
`shadow`	`boolean`	`true`	Draw a soft drop shadow under the preview.
`shadowColor`	`string`	`'rgb(0 0 0 / 0.38)'`	Colour of the drop shadow. Any CSS colour. Ignored when `shadow` is off.
`textColor`	`string`	–	Text colour of the link. Defaults to the colour it inherits.
`underlineColor`	`string`	–	Colour of the underline. Defaults to the text colour, faded until hover.
`previewOnTouch`	`boolean`	`false`	Touch: when true the first tap previews and the second tap follows the link. By default touch just navigates.
`spring`	`{ stiffness?: number; damping?: number }`	–	Spring that drives the rise, fade, scale and lean.
`ref`	`Ref<HTMLAnchorElement>`	–	Ref to the real `<a>`.

Also takes every prop from Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>.

Preview

Code

The code is locked

Props

A11y