Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Press Clippings Gallery Block for React

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.

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 press wall for React with Base 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. DialogContent takes finalFocus, a function that returns that cutting.

How does it fit on a phone?

The cuttings hang two across and the rail scrolls sideways. The reader fills the screen: the counter and close button at the top, the cutting above, and the headline, the lines and the buttons below, within reach of a thumb.

Are the papers and quotes real?

No. The bakery, the papers, the headlines and the lines of each piece are invented for the example, so replace them with your own press before you publish anything like it.

  • Pro

    Certificate Wall Gallery

    Walls and tables

    Nine drawn certificates hung salon-style from a picture rail for a packaging studio, in different sizes on shared centre lines, with a year rail that dims the other years and a card with the jury's citation on hover and focus.

  • Pro

    Client Marks Gallery

    Hairline grids

    Twelve drawn monogram marks on shared hairlines for a brand studio, where each mark opens a viewer dialog with the project that client commissioned, its brief and result, Previous and Next client, a counter, arrow keys and focus that returns to the mark.

  • Pro

    Pull Quotes and Press Kit About

    Press and recognition

    A press page for a ticketing company: three pull quotes set as headlines with the outlet in serif lettering, and a press kit of three real files that download from the page, a boilerplate with a Copy button and a press contact.

  • 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

    Masonry Testimonials

    Walls and lanes

    A masonry wall of twelve notes from runners in CSS columns inside a framed figure: cards of every length stack tight, from one column on a phone to four on a wide screen.

  • Pro

    Mood Board Gallery

    Walls and tables

    A pinboard of twelve pieces of five kinds (pictures, paint chips, materials, words and type) pinned a degree off square, with a lens that dims the other kinds without moving anything.

All 100 gallery blocks