shadcn.io is not affiliated with official shadcn/ui
Keyword Highlight Testimonials Block for Solid
Five customer quotes about a UI kit, set large in ruled bands under keyword chips: pick one and every quote that mentions it marks the words, lights a bar and counts where it comes up.
Installation
Overview
Let the visitor read the reviews for the thing they care about. The header row says what the section is, with a row of keyword chips at its end (Types, Dark mode, Handoff, Bundle size, each with a count). Below it five quotes about Mortise, a fictional component kit, run as ruled bands that share their hairlines, with the author on the left and the quote set large on the right and + marks on the outer corners. Pick "Dark mode" and the words that mention it are marked in every quote, a bar lights the edge of those bands, the quotes that don't mention it dim, and a status line says how many do. Nothing is hidden, so the page keeps its full social proof while it answers a specific question. At rest every keyword carries a dotted underline, so the chips read as a guide to the quotes. A last band holds the one filled Shine Button. It's built from Toggle Group, Button, Avatar and Guides with CSS transitions only and your theme's tokens. For feature pages and pricing pages where customers name the capabilities you most want to stand behind.
FAQ
How do I change the quotes and keywords?
Edit KEYWORDS and QUOTES at the top of the file. A quote is a list of parts; give a part a topic matching a keyword's value and those words become markable. Counts, the status line, the dimming and the lit bar are all derived from that data, so nothing else needs editing.
How does picking a keyword work?
The chips are a Toggle Group of pressable buttons with nothing pressed at rest, and only the latest one you press stays on. Pressing a chip marks that keyword in every quote that mentions it; pressing it again, or pressing Clear at the end of the status line, goes back to the resting state. Quotes that don't mention the keyword stay where they are, in a quieter text colour, so this is a highlighter, not a filter: use a filter block if you want quotes to disappear.
How does it work with a keyboard and a screen reader?
Tab moves into the chips, and the arrow keys move between them; Space or Enter presses one. Each chip reads its name, its pressed state and how many quotes mention it, and a polite status line announces the result, such as "Dark mode comes up in 2 of 5 quotes". The marked words are a real mark element, so assistive technology that announces highlights will do so.
Does the page jump when I pick a keyword?
No. Marking words doesn't change their size, the Clear button keeps its space while it is hidden, and the status row reserves its height, so nothing moves when the selection changes. With reduced motion the bar's fade and the colour change are instant and the entrance doesn't play.