shadcn.io is not affiliated with official shadcn/ui
Inline Expansion Thumbnail Grid Block for Radix UI
Sixteen drawn thumbnails on shared hairlines, eight across, where choosing one opens a preview band straight under its row with the whole picture, its source, Previous, Next and Close, without changing the block's height.
Installation
Overview
An inline-expansion grid for React with Radix UI. A start-aligned header sits over sixteen drawn thumbnails on shared hairlines that run rail to rail: eight across from md, four on a phone. Choose a thumbnail and a preview band opens right under its row, across the whole grid and marked with + marks on its corners: the picture whole at its own ratio, its title, source and size, Previous, Next and Close. The thumbnail carries aria-expanded and aria-controls, the band sits in the DOM straight after it, Escape or Close shuts the band and focus returns to the thumbnail. Closed, the band rests at the foot as an empty tray, so the grid never changes height. The pictures are drawn in the theme's greys. It's built from Guides and Button. For search results, stock libraries and any grid where a detail should open in place rather than in a dialog.
FAQ
Where does the band open, and why doesn't the page move?
Under the chosen row. The band is a full-width grid item placed on the row below the thumbnail; the later thumbnails flow into the rows after it. When nothing is open the same band rests after the last row as an empty tray, so the block is always the same height: opening a picture moves the rows below it down by exactly the tray's height.
What happens to focus?
The band is in the DOM straight after the thumbnail that opened it, so Tab goes into it next. Previous and Next keep focus on the button you pressed, even though the band is rebuilt in a new place when the next picture is in another row. Close and Escape return focus to the thumbnail.
Which keys work?
Tab visits every thumbnail, Enter or Space opens or closes one, Escape closes the band while focus is inside the block, and Previous and Next wrap round at the ends.
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. The preview shows the picture whole at its own ratio and the grid crops it square, so keep each entry's ratio the photograph's own.