shadcn.io is not affiliated with official shadcn/ui
Post Summaries Blog Block for React
Long-read summaries with a length toggle: One line, Three bullets or Paragraph switches every post summary at once, each labelled as written by the author, in rows that never change height.
Installation
Overview
A summary switcher for React with Base UI, written for Gistwell, a long-reads digest. A start-aligned header carries a ToggleGroup at its end, One line, Three bullets or Paragraph, over four posts on hairline rows from rail to rail. The toggle switches every post's summary at once. Each summary is labelled "Summary written by the author": the authors wrote all three lengths, nothing is generated. A row holds its height because all three lengths share one cell and only the chosen one is seen, so nothing moves when you switch. It is built from Guides, Badge and ToggleGroup. For digests, newsletters and any list of long posts.
FAQ
Who writes the summaries?
The post's author, and the label says so. Each post in POSTS carries its own line, bullets and paragraph; nothing is generated at run time. The three lengths are separate pieces of writing, not one text cut short.
Why do the rows not jump when I switch?
All three lengths of a summary are rendered in the same grid cell. The unseen ones are invisible, inert and hidden from assistive technology, so the row is always as tall as its longest length. Only the chosen one is seen and read.
How does the toggle behave?
A ToggleGroup that always keeps one length selected; arrow keys move between the three. A status line under it says which length is showing for every post and is announced politely. Change FIRST_MODE to start on a different length.
Related
- ““““Pro
Pull Quotes Blog
Article partsFour pull quotes from a science-writing blog in cells with line overshoot: a large drawn quotation mark, the key phrase marked by a highlighter, who said it and in which post, a Copy button and a Read in context link.
- Pro
Compact List Blog
Post listsTwenty posts as dense one-line rows like a printed contents page: date, title, a dotted leader and the reading time, eight shown and twelve behind a Show more button.
- Pro
Speed Select Audio Blog
Audio, video, photosA read-aloud list: a Select picks the playback speed and every article's listening time and the total recompute, beside a waveform drawn from the title's letters with chapter ticks.
- Pro
Reading Time Blog
Reading toolsPosts by length with a reading-speed Slider: every post shows its words, a length bar against the longest post and the minutes it takes at your speed, with a total that recalculates as you move the slider.
- Pro
Margin Note Editorial Blog
Featured storyThree editor's picks as split rows: the post with a numeral tile at the start and, in a tinted margin cell at the end, the editor's note with a hanging quote mark and a marked reason.
- Pro
Framed Cards Blog
Card gridsSix text-only posts as raised cards in one tinted frame, two across: category, title as the card's one link, a short dek and a line with author, date and reading time.