shadcn.io is not affiliated with official shadcn/ui
Reader Highlights Reviews Block for React
One 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.
Installation
Overview
Reader highlights on a review for React with Base UI, for the Rifflebridge Ghyll, a fictional nine-foot fly rod. One long review of eight sentences reads as two paragraphs, and every sentence is a native checkbox you can press: press it to highlight it, press it again to take yours back. A highlight shows as a tint that gets stronger with the number of readers who marked the sentence, and yours is also underlined, so it never rests on colour alone. At the start of a split behind a divider, a "Most highlighted" list ranks the four sentences with the most readers and re-ranks as you press; in the page order the review comes first, so on a phone the text sits above the list. It's built from Rating, Avatar, Badge and Guides, with CSS transitions only.
FAQ
Where do the counts come from?
Each sentence in PARAGRAPHS has a readers count: the typed number of readers who marked it before this visit. Your highlight adds one. The tint step is worked out from the busiest sentence: 60% of it or more is the darkest, 25% or more the middle and anything above zero the lightest.
Is a highlight saved?
No. It's local state and a reload starts afresh. Nothing is sent. To keep highlights, send the sentence's id from the handler and seed readers from your data.
Why are the sentences checkboxes?
A native checkbox inside a label lets the sentence flow as inline text, wrap across lines and still be a real control: Space toggles it, it has a visible focus ring, and its name is the sentence plus how many readers highlighted it. No script handles keys.
Related
- Pro
Highlighted Phrases Reviews
Filter and searchThree reading-lamp reviews with hand-picked phrases marked by a plus or minus glyph, and a phrase index of toggles with counts that makes only the chosen kinds of phrase stand out.
- Pro
Long-Form Review
Cards and wallsA 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.
- Pro
Tag Cloud Reviews
Insights and trendsA word cloud for coffee-bean reviews in a framed figure: eighteen words sized by how often the reviews say them, and a keyword-in-context list that shows every mention of the chosen word with who said it.
- Pro
Helpful Votes Reviews
Votes and repliesThe best favourable and the best critical review of a water filter jug side by side, each with a Helpful vote and a worked-out 'n of m found this helpful', above the other reviews in ruled rows with a most-helpful or newest order.
- Pro
Snippet Cards Reviews
Cards and wallsEight review snippet cards on shared hairlines for a yoga mat: each leads with its most helpful sentence, and a Sheet opens the whole review with Previous and Next buttons and a polite counter.
- 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.