shadcn.io is not affiliated with official shadcn/ui
Editorial Spreads Gallery Block for React
An editorial spread you turn: three differently laid out spreads of a food-and-travel magazine, each with a drop cap, a pull quote and drawn pictures, turned with a pager or the arrow keys.
Installation
Overview
A magazine for React with Base UI. A header with a pager (Previous, spreads 1 to 3, Next) and a "Spread 1 of 3" line sits over one spread at a time, under a hairline rule that ends the block. The first spread sets a text column with a drop cap beside a large picture and two small ones; the second puts a portrait picture at the start beside a pull quote and two small pictures; the third runs a wide picture over three columns. A hairline divider with a + mark separates text from pictures. The three spreads share one grid cell, the others unseen, so the tallest sets the height and turning never moves the page. The arrow keys (Home and End too) turn them while focus is inside the block. The pictures are drawn in the theme's greys, never photographed. It's built from Pagination, Badge and Guides. For magazines, annual reports, long reads and any story told in layouts.
FAQ
How do I turn a spread?
Click Previous, Next or a number, or press the arrow keys, Home or End while focus is on the pager or the spreads region. In a right-to-left layout the arrows follow the reading direction. The ends of the pager are aria-disabled and out of the tab order.
Is the pager real navigation?
?spread=n address, and a click turns the spread in place.A polite status line says "Spread 2 of 3".Does the page move when I turn?
No. All three spreads sit in one grid cell, the hidden ones invisible, aria-hidden and inert; the tallest sets the height, and a spread that is shorter has some air under it. Changing spreads cross-fades (not under reduced motion).
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.
Related
- Pro
Caption Density Gallery
Rows and bandsA 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.
- Pro
Printed Photo Album Gallery
Walls and tablesAn open photo album on a tinted table that opens on its cover and turns like leaves onto four spreads of drawn pictures in corner mounts, with Previous and Next, a spread counter and arrow keys.
- Pro
Sortable Masonry Gallery
Masonry and mosaicA masonry wall of twelve drawn pictures of mixed ratio in CSS columns, framed with + marks on its corners, with an Order control (Newest or Oldest) that re-sorts them.
- Pro
Lightbox Gallery
Stage and thumbnailsNine 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
Pagination Blog
Post listsA transit-planning blog's archive as rows, four to a page over three pages, with the catalog pagination in a band at the foot, a polite 'Showing 5 to 8 of 12' line and a height that never changes between pages.
- Pro
Carousel Gallery
Carousels and slidesNine drawn trail pictures in a ruled band for a trail-guide app, three wide with the next one cut off at the rail, turned with buttons, dots and the arrow keys, under a heading row with a live counter.