Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Caption Density Gallery Block for Svelte

A photo essay of five framed pictures in alternating rows, with a Short and Full switch: Short shows each title, Full adds the place, date, credit and a two-sentence story.

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 captioned photo essay for Svelte with Ark UI. Five pictures run down the page in rows ruled apart from rail to rail, the picture first in one row and last in the next, each at its own ratio (3:2, 16:9, square, 4:3 and a wide 21:9). A "Captions" group at the end of the header switches between Short, which shows each title, and Full, which adds the place, the date, the photographer and two sentences about the frame. The lines Full adds are laid out all along and only hidden while Short shows, so the rows keep their height and nothing moves when you switch. A polite line says what changed, and the pictures are drawn in the theme's greys, never photographed. The page's rails and top rules come from the Guides spine, and the last row ends the block. It's built from Guides and Toggle Group. For photo essays, portfolios, editorial pages and any set where the words sometimes matter and sometimes don't.

FAQ

What does Full add, and can I add more?

Full reveals a line of place, date and credit and a short story under every title. Each is a field of the FRAMES entry (place, date, credit, story), so more fields are one more line in the Row component. Keep the Full caption short enough for its picture's height, about 160 pixels, or the rows will grow.

Why doesn't the page jump when I switch?

The Full lines are always in the layout, and Short hides them with invisible, opacity-0 and inert, so each row is as tall as its Full version. A hidden caption can't be tabbed to or read out, and the change fades in over a few hundred milliseconds (not at all with reduced motion).

How do I use my own photographs?

The drawn pictures are one Scene component. Where the code comment says so, swap it for an <img> with object-cover, and add a src to each entry. The row's picture box is a fixed 160 pixels high and as wide as the ratio asks, so keep each entry's ratio the photograph's own.

Which keys work?

The Captions group is a single-choice toggle group that always keeps one value on: Tab goes to it, the arrow keys move between Short and Full, and Space or Enter chooses.The pictures and captions are plain content, read in order.

How do the rows alternate without changing the reading order?

Each row's picture comes first in the markup and the caption second, always. From md the grid places them: the picture in the first five columns and the caption in the last six, then swapped on the next row. A screen reader and the Tab order never see the swap.

How does it fit on a phone?

Each row stacks, the picture above its caption and as wide as the screen (cropped to 128 pixels high). Under sm the two-sentence story is dropped in Full, which keeps the page to a couple of screens; the place, date and credit remain.

All 100 gallery blocks