shadcn.io is not affiliated with official shadcn/ui
Press Clippings Gallery Block for Svelte
Eight drawn newspaper cuttings on a bakery's wall, each a degree off true, with a rail by kind that lights some and dims the rest, and a reader dialog with the paper, the headline, the fixed date, a few lines and a link.
Installation
Overview
A press wall for Svelte with Ark UI, for Kilnhearth Bakery, a bakery chain. A start-aligned header carries a "Kind" rail at its end (All, Reviews, Features, Interviews, Mentions) and a line that says what is lit. Under it hang eight drawn newspaper cuttings, pinned apart with + marks at their corners and each a degree off true: a masthead, a headline, columns of set type, a picture in one column and a ragged foot. Choosing a kind dims the cuttings of the other kinds and writes "2 of 8 clippings: Reviews" in a polite line, and nothing moves. Each cutting is a button that opens one reader dialog: the cutting whole, the paper, the headline, the kind, the fixed date, a few lines of the piece and a link to read it, with Previous, Next, a "3 of 8" counter, the arrow keys (Home and End too), a swipe on touch screens and Escape. Closing returns focus to the cutting last read. On a phone the reader fills the screen. The cuttings are drawn, not scanned, in your theme's greys. It's built from ToggleGroup, Dialog, Badge and Guides. The bakery, papers, headlines and words are made up for the example.
FAQ
How do I use my own press?
Each piece in PIECES has a paper, headline, kind, a fixed published date as ISO, an excerpt and a scene. Replace the Scene in a cutting with <img alt="" className="size-full object-cover" src={…} /> of your scan (the button already names it), and the one in the reader with the same, and point the "Read the piece" link at the article. The kinds on the rail come from KINDS, and the counts are worked out from the list.
What does choosing a kind do?
It dims the cuttings of the other kinds under a pale wash and sets their captions a little lighter. They stay where they are, stay in the tab order and still open, and Previous and Next in the reader still walk all of them in order. "All" clears it.
Is there one reader or one per cutting?
One. The block keeps whether it is open and which cutting it shows, so a cutting, Previous, Next, an arrow key or a swipe only changes which one is read. Previous and Next wrap around. The headline, the paper, the date and the excerpt follow, the cutting fades in (still with reduced motion) and a polite line says which one is shown.
How does it work with a keyboard?
Tab reaches the kind rail, then each cutting; Enter or Space opens the reader. Inside, the arrow keys move to the previous and next cutting (mirrored in a right-to-left layout), Home and End jump to the ends, Tab cycles through the close button, the link and the two buttons, and Escape closes. Focus returns to the cutting you were reading, not the one you opened.
The Dialog takes finalFocusEl, a function that returns that cutting.