shadcn.io is not affiliated with official shadcn/ui
Post Summaries Blog Block for React Aria
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 React Aria, 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.