Overlays
Lightbox
The thumbnail and the expanded view share a layout id, so opening moves the artwork across the screen rather than cutting to a copy of it. That continuity is the point: the reader never loses track of which item they opened, which matters most in a grid where every thumbnail looks alike. Escape, the scrim, or a click on the artwork closes it back into the thumb.
npx shadcn@latest add @minflow/lightboxWhere to use it
- Image and media grids where the detail only matters at full size.
- Covers, screenshots, and diagrams inside documentation and detail panels.
- Never for anything the reader has to act on; the expanded view holds no controls, so it is for looking and nothing else.
Variations
Single thumbnail
One piece of media inside a page or a panel. The thumbnail is the trigger, which is what makes the morph legible.
In a grid
Several thumbnails side by side. Each one keeps its own layout id, so the expanded view always comes from the tile the reader actually clicked.
Custom thumb
When the thumbnail has to match its surroundings, such as a wide banner or a dense grid tile. Size the thumb through thumbClassName and the morph adapts to whatever shape you give it.