shadcn.io is not affiliated with official shadcn/ui
Press Mentions Carousel Block for React Aria
Eight press mentions in a strip of narrow cells where choosing a cell widens it to show its pull quote and a link, with the outlet, date and tone of each piece and Previous and Next that open the neighbouring cell.
Installation
Overview
Give press coverage a strip you can open one piece at a time, with this press mentions carousel for React with React Aria. Pressholt, a media-monitoring tool, shows eight pieces about one company as narrow cells: an invented outlet, a date, the headline and a tone as a word with a three-dot weight (Praise, Mixed, Critical). Choosing a cell widens it to show its pull quote and a "Read the piece" link that goes nowhere, and the track brings it to the start. The cell's width is the state: the button says whether it is expanded, and the track re-measures once the width has finished changing. Buttons for Previous and Next, and the arrow keys (mirrored in a right-to-left page), open the neighbouring cell, and the foot names the open outlet. On a phone the open cell takes most of the width and the next one peeks. The ruled panel comes from Guides. It is built from Carousel, Button and Guides, with CSS transitions only. The outlets, headlines and quotes are made up.
FAQ
How do I use my own mentions?
Edit MENTIONS. Each has an id, an outlet, a date, a headline, a quote and a tone (Praise, Mixed or Critical). The tone's dots are derived from it. Use outlets and quotes you have the right to show, and link the real piece from the link.
How does a cell grow?
The open cell takes a wider basis and the others stay narrow, with a transition on the basis that is removed under reduced motion. Only the open cell's quote and link are in the tab order. Embla re-initialises when the width transition ends, so its snap points match the new widths, and the block keeps the open cell as its own state.
How does it work with a keyboard?
Tab reaches each cell's button, then the open cell's link, then Previous and Next. Enter or Space opens a cell. The arrow keys open the neighbouring cell (the end arrow is next, the start arrow in a right-to-left page), and Home and End open the first and last.
What is announced?
The foot is the block's one polite live region: "The Alder Bulletin is open, mention 1 of 8." after a cell opens, and "That link goes nowhere in this demo." after the link is pressed.
What stays local in the demo?
Everything. The link does not leave the page, the outlets and quotes are made up, and nothing is fetched. To wire it for real, load the coverage your tool found, give each mention its real URL, and keep the tone label as your own classification rather than a claim about the outlet.