shadcn.io is not affiliated with official shadcn/ui
Recommendation Rate Reviews Block for Ark UI
The share of owners who would recommend a mattress, by how long they have owned it: three tabs, a rolling percentage over a two-part bar with a tick for everyone, and the gap in words.
Installation
Overview
A recommendation rate for React with Ark UI, for the Mossmill pocket-sprung mattress, a fictional product. A header says what was asked; under a rule, a tab list of three tiles forms the band's top edge: First month, Three months, and A year or more, each with its owner count. Under the tiles, a split behind a divider. At the end, the chosen tab's share as a rolling figure over a two-part bar (yes, no) with a tick at the share of all 261 owners; at the start, the same facts in words ("71 of 90 owners at three months would recommend it"), the gap to everyone with an arrow and a count of points ("3 points below everyone"), and the most common reason for a no. Six typed counts drive everything: the percentages come from the largest remainder method so yes and no always add up to 100, and the gap is the difference of those whole numbers. There is no ring or gauge, and no colour for good or bad: the bar and the tick are your theme's text colour. It's built from Tabs, Sliding Number and Guides, with CSS transitions only.
FAQ
How do I use my own figures?
Edit SPANS at the top of the file: for each tab an id, a label, a period phrase for the sentence, how many owners said yes and no, and the most common reason for a no. The figure, the bar, the owner counts on the tabs, the share for all owners and the gap are worked out from those counts when the module loads. Percentages are whole numbers by the largest remainder method, so a tab's yes and no always add up to 100.
How do the tabs work?
They are the catalog Tabs: The arrow keys move between tiles (the keys flip in right-to-left layouts), Home and End jump to the first and last, and the chosen tab's panel holds the sentence, the gap and the reason. The figure and the bar are beside the panel and hidden from assistive technology, because the sentence says the same numbers. An unseen copy of every tab's text shares the panel's cell, so the tallest sets the height and switching never moves the page.
Tabs are controlled: value and onValueChange({ value }), with value on each trigger and panel.
What does the tick on the bar mean?
It marks the share of all 261 owners who would recommend the mattress (82%), so each tab's bar can be read against it. The gap is also written out: an arrow up or down and "3 points below everyone", so direction never relies on colour or on the tick alone.
Why is nothing green or red?
A recommend rate is a plain share, not a verdict. The bar's yes part is your theme's text colour at full strength and the no part a faint step of it, the tick is solid, and direction is an arrow and a word. That keeps the page's primary colour for its calls to action and works in every theme.