Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Response Rate Panel Reviews Block for Ark UI

An SLA slider for review replies: set a reply-within target from 4 to 48 hours and see which of six team members meet it, with the team rate worked out from their reply times.

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

A response-rate panel for React with Ark UI, for Weirworth, a fictional broadband provider. A centred header says a member meets the target with 80% of replies inside it, to every review whatever its rating. Under its rule, a band holds a Slider, "Reply within N hours", from 4 to 48, with the figure large beside it and tick labels under it, and at the end of the band the team rate, rolling in SlidingNumber, with how many members meet it. Under a second rule, a real table lists six team members on shared hairlines: replies, the median hours each took, the share of replies inside the target and a result in words with a tick or a dash, Meets or Misses. Everything is counted from the typed reply times, and a polite line gives the result once the slider settles. It's built from Slider, Sliding Number, Avatar and table markup. On a phone the Replies column drops.

FAQ

How do I put in my own team?

Edit TEAM: each member has the hours each of their replies took. Replies are the length of that list, the median is the middle value (the mean of the middle two when there is an even number), and a member's share is the replies at or under the target over all of theirs. Change GOAL (80) to change what "meets" means and MIN, MAX and START to change the slider.

How is the team rate worked out?

By pooling every reply of every member and counting how many are inside the target, not by averaging the six percentages, so a member who answers many reviews weighs more. The line beside it says how many members meet the target. The pooled figure is whole numbers by rounding, so it can differ by a point from an average of the rounded shares.

How do I use the slider from the keyboard?

Focus the thumb and use the arrow keys for one hour, the page keys for a bigger step, Home and End for the ends. The table and the team rate update as you move; the polite line is spoken when you stop, so it isn't read out at every step.

Does the panel rank people or hide anything?

It doesn't sort or rank: the rows keep their order whatever the target. Meets and Misses are words with a tick and a dash, not colours, and every reply counts, whatever the rating of the review it answered. The figures are typed example data.

What does a phone show?

The same band and a table of four columns: the Replies column is dropped, and the avatars with it, so the names, medians, shares and results fit without sideways scrolling. The team rate sits under the slider and the polite line is read out only.

Does it work right to left?

Yes. The band, the table and the column order follow the page's direction. The slider fills from the start and its tick labels follow it, and the figures are wrapped so their digits stay in order.

All 100 reviews blocks