shadcn.io is not affiliated with official shadcn/ui
Long-Form Review Block for React
A customer's six-month review of a keyboard as four chapters beside a sticky chapter index, with inline Pro and Con markers, a reading time worked out from the words and a verdict band.
Installation
Overview
A long review read like an article, for React with Base UI, about the Lintelstead 75, a fictional mechanical keyboard. A split divider runs the height of the block. In the end column, four chapters (the first week, three months in, what has worn, would I buy it again) sit between hairline bands as prose, with a Pro or Con marker, an icon and the word, in front of each sentence that praises or complains, and a verdict band at the foot: the score in read-only stars and a three-row breakdown. In the start column the title, the reviewer, a reading time worked out from the words and a sticky chapter index stay in view, with a bar that follows the chapter on screen. On a phone the index becomes a "Jump to" Select under the title. It's built from Toc, Select, Rating, Avatar, Prose and Guides.
FAQ
How do I change the review?
Edit CHAPTERS at the top of the file. A chapter has an anchor, a title and paragraphs; a paragraph is a list of pieces, each plain, a pro or a con, and the Pro or Con marker is added in front of the sentence. The index, the Jump to list and the reading time all come from the same array, and PARTS holds the verdict's three rows.
Where does the reading time come from?
It counts the words of every piece and divides by 200 words a minute (PACE), rounded, with a minimum of one minute. Edit the text and the line changes with it.
How does the chapter index work?
Each entry is an anchor to its chapter's heading, and the bar beside the list follows whichever chapter is on screen. The headings keep a scroll margin so they land below the page's own top. It is hidden below the large breakpoint, where the Select takes over.
What does the Jump to Select do on a phone?
Choosing a chapter sets the page's hash to that chapter's heading, so the browser scrolls there, and the Select keeps showing the last chapter you jumped to. It is a real Select, so it opens with Enter or Space and closes with Escape.
Related
- Pro
Expert Bench Test Reviews
Criteria and compareA lab's bench test of an espresso grinder: a framed Scorecard and Method tab strip, a table of five measured tests with pass marks, and a verdict with stars, a pass count and a pull quote.
- Pro
Detailed Card Reviews
Cards and wallsOne review with everything it can carry in a card in card: the reviewer and purchase facts, five criteria scores, pros and cons, three drawn pictures, a Helpful vote and the seller's reply.
- Pro
Changed Ratings Stories Reviews
Cards and wallsFour sock owners who rated twice, as a two by two grid of cards whose toggle group flips between the first week and month three, with a badge showing the signed change.
- Pro
Reader Highlights Reviews
Filter and searchOne long review of a fly rod where each sentence is a checkbox you can highlight, with a stronger tint for sentences more readers marked and a Most highlighted list that re-ranks.
- Pro
Pros and Cons Reviews
Insights and trendsPros and cons gathered from 86 reviews of a robot vacuum: a two-part bar of the mentions, two columns of points with how many reviews mention each, and one supporting quote per point.
- Pro
Chaptered Origin Story About
Company storyA company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.