Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Reader Highlights Reviews Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Reader highlights on a review for React with Ark 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.

How does the Most highlighted list work?

It shows the four sentences with the most readers, ties in reading order, with the sentence on one line and the count under it. Highlight one and its count goes up and, where it earns it, the list re-ranks; a line under the review says how many you marked.

Does it work right to left?

Yes. The review and the list swap sides with the page direction, the divider is on the start side of the review and the ranked sentences are truncated at the end.

All 100 reviews blocks