Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Hover Card EXIF Gallery Block for React

Six drawn frames in cells of their own, each a link with a hover card of camera, lens, aperture, shutter speed and ISO that opens on hover and on keyboard focus, and prints the same settings in the caption on a touch screen.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A hover-card gallery for React with Base UI. A centred header sits over six drawn frames in cells of their own (three across, two on a phone), each with a hairline frame that overshoots its corners. Each frame is a link with a hover card: hover it, or Tab to it, and the card lists the camera, lens, aperture, shutter speed and ISO it was shot with, as a definition list. A touch screen has no hover, so the card stays shut and the same settings are printed in the caption instead; a screen reader always gets them as text. The frames are drawn in the theme's greys, never photographed. It's built from Guides and Hover Card. For photo notebooks, camera reviews and any picture whose details are secondary.

FAQ

Does the card open for keyboard users?

Yes. The hover card opens when its link takes focus and closes on Escape or when focus leaves.The settings are also in the markup as an unseen line in the caption, so nothing depends on the card.

What happens on a touch screen?

Under (hover: none) the card is hidden with CSS and the caption shows one line of settings ("35 mm · f/2.8 · 1/250 s · ISO 400"). Tapping a frame follows its link as usual; it never opens a card that can't be dismissed.

Are these real settings?

They are example data for a fictional camera, typed in each entry. Replace the entries with your own EXIF and the card and the caption follow.

How do I use my own photographs?

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.

Which keys work?

Tab visits the six frames, Enter follows one, and Escape closes an open card.

How does it fit on a phone?

Two columns by three rows, with the settings line under each title. The cards never open on a touch screen.

  • Pro

    Hover Caption Masonry Gallery

    Masonry and mosaic

    A masonry wall of nine drawn interiors in three columns, each in its own framed cell, with a caption and a Save toggle that rise on hover and on focus and a live count of saved pictures.

  • Pro

    Numerals Over Maps Gallery

    Hairline grids

    Six drawn route maps on shared hairlines, each with its distance laid over the foot in large figures on a solid, masked panel, and a Show control that rolls every figure between this year and all time.

  • Pro

    Ratio Switcher Gallery

    Hairline grids

    Six drawn pictures in cells of their own, with a Ratio control (1:1, 4:3, 16:9, 3:2, 9:16, 21:9) that crops every picture to it while keeping each subject in frame, and a chip on every picture naming the ratio.

  • Pro

    Lightbox Gallery

    Stage and thumbnails

    Nine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.

  • Pro

    Paginated Minimal Grid Gallery

    Hairline grids

    A quiet grid of twenty-four drawn concrete-architecture plates, eight to a page on shared hairlines, with a title and year that appear on hover and focus and the catalog pagination in a band that ends the block.

  • Pro

    Hover Card Mosaic Team

    Grids and walls

    The planners of an interior-planning studio as a mosaic of mixed spans that shares its hairlines: a two-by-two lead cell, two wide cells, three small ones and a +12 cell, each person a link with a hover card that opens on hover and on focus.

All 100 gallery blocks