shadcn.io is not affiliated with official shadcn/ui
Response Time Comments Block for React Aria
Eight support threads as bars of the time to their first reply with a movable target tick, a sentence like 5 of 8 within 4 hours (63%), the median and 90th percentile, and rows that open to the first comment and reply.
Installation
Overview
Check how fast the first reply comes, with this response-time panel for React with React Aria. A compact header names the product, and the first band holds a Segment Group that sets the target to 1 hour, 4 hours or 1 day. A sentence under it says how many first replies came within the target ("5 of 8 first replies within 4 hours (63%)"), a strip gives the median, the 90th percentile and how many threads are over, and the main band draws eight threads as horizontal bars of the time to the first reply on a compressed (square root) scale, each with a tick at the target. A thread over the target has a solid bar and the words "Over by 2 h 10 min"; one within it has a lighter bar and "Within target", so nothing relies on colour. Each row is a Collapsible that opens to the first comment and the first reply. It is built from Segment Group, Collapsible and Guides, with hand-built bars and a CSS entrance only. For support leads who review service levels.
FAQ
How do I use my own threads?
Edit LINES, one line for each thread: the title, the minutes to the first reply, who asked, the time, the first comment, who replied and the first reply. The bars, the verdicts, the median, the 90th percentile and the counts are worked out from the minutes. Change TARGETS for other targets and CEILING (in minutes) for a longer scale.
Why is the scale compressed?
Replies range from minutes to more than a day. On a straight scale every quick reply would be a sliver, so the bar length is the square root of the time, and the tick uses the same scale. The times are always written beside the bars in full, so nothing depends on reading the length.
How are the median and the 90th percentile worked out?
The times are sorted. With an even count the median is the average of the two middle ones; the 90th percentile is the value at the rank of 90 percent of the count, rounded up. Both are recomputed from the typed minutes and do not depend on the target.
What stays local, and how do I make it real?
Everything; the threads are typed and nothing is fetched. In a real app, take the first reply time from your comment timestamps (excluding automatic replies), store it per thread and compute the same strip on the server for the period you show.
Is it accessible?
The bars are hidden from screen readers; each row is a button that opens the row, and its name already holds the title, the time and the verdict in words. The target group is labelled, and a polite line speaks the new sentence when you change it. React Aria's segmented control follows the same names and keys; only its selection events differ in the code.