Fieldbook
Sign in

Overlays

Shared-Element Lightbox

A grid of thumbnails where clicking one morphs it seamlessly into a large centered overlay, and closing morphs it back to its original spot.

Using Shared-Element Lightbox

A grid of thumbnails where clicking one morphs it seamlessly into a large centered overlay, and closing morphs it back to its original spot.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: columns, gap, closeOnBackdrop

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

Custom shell lightbox
1948Custom shell lightboxOverlaysA gallery grid that opens a borderless full-bleed lightbox, showing how one open, close and focus engine can wear a completely custom shell.
Thumbnail-to-video lightbox
2449Thumbnail-to-video lightboxOverlaysA video thumbnail with a play button that opens a contained lightbox, the video panel arriving from a chosen direction over a blurred, dimmed backdrop.
Anchored info popover
1911Anchored info popoverOverlaysA trigger button that opens a small floating info panel anchored to one of its edges, fading and scaling in from that edge and dismissing on outside click or Escape.
Anchored popover card
1912Anchored popover cardOverlaysA trigger button that opens a small settings card anchored to itself, scaling in from the edge it grows out of and closing on a second click, Escape, or a press outside.
Anchored settings popover
1913Anchored settings popoverOverlaysA button that opens a small settings panel anchored beside it, growing from the corner nearest its trigger and flipping sides when space runs out.
App folder expand
2300App folder expandOverlaysA home screen style folder tile whose small app icons grow into a full panel, each icon traveling from its miniature to its large spot.