shadcn.io is not affiliated with official shadcn/ui
Highlighted Phrases Reviews Block for Radix UI
Three 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.
Installation
Overview
Highlighted phrases for React with Radix UI, for the Orielby Reading Lamp, a fictional bedside lamp. A header with the title and one sentence sits over a band split by a divider. At the start, three full reviews as a reading column, each with its stars and their value in words, a title, the text, the reviewer with an initials avatar, a "Verified purchase" mark in words and a fixed date. In the text, phrases picked out by hand are marked: underlined, in medium weight, with a leading plus for praise (solid underline) or a minus for a complaint (dashed underline), and the word "Praise" or "Complaint" read out for screen readers. At the end, a phrase index: seven kinds of phrase (warm light, steady arm, smooth dimmer, solid build, glare on glossy pages, short cable, fiddly switch) as toggles, each with its count, under a summary that says how many phrases were picked out in how many reviews and how they split. Press some and the marks of the other kinds step back to a quiet tone while the chosen ones take a tint; press none and every phrase is marked. The marks change colour only, never weight or size, so the text never reflows. On a phone the index is a row that scrolls sideways above the reviews. The phrases are typed by hand, and the block says so ("Phrases picked out by hand"); nothing is extracted live. It's built from Toggle Group, Rating, Avatar and Guides, with CSS transitions only.
FAQ
How do I use my own reviews and phrases?
Edit THEMES (an id, a label and a tone of praise or complaint) and REVIEWS at the top of the file. A review's text is a list of parts: plain text has an empty theme, and a picked phrase names the id of its theme. The index counts, the summary line and the status line are worked out from the parts, so adding a phrase or a theme needs no other change. Pick phrases yourself, or have your team do it; the block makes no claim that the choice is automatic.
How are praise and complaints told apart without colour?
By shape and words: praise has a plus and a solid underline, a complaint a minus and a dashed underline, and each mark starts with "Praise:" or "Complaint:" in text that only screen readers hear. In the index each kind has the same plus or minus, and its accessible name begins with the same word and ends with its count ("Praise: Warm light, 2 phrases").
What does pressing a kind of phrase do?
It makes only that kind stand out. With none pressed every mark is full strength; with some pressed, their marks take a soft tint and the rest step back to a muted tone with a faint underline. Weight and size never change, so no line of text reflows and nothing moves. A polite line says "Showing 2 of 7 kinds of phrase" after each change.
The index is a multiple-choice toggle group (type="multiple").
How does it fit on a phone?
The index moves above the reviews and becomes a row that scrolls sideways, so its summary and the first review share the first two screens; the reading column then follows at full width. Each index item keeps its glyph, its label and its count.