Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Response Rate Panel Reviews Block for React

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A response-rate panel for React with Base 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.

  • Pro

    What is waiting for a reply at a ceramics studio: three worked-out cells (awaiting, replied this month, average rating) beside the queue of reviews that need an answer, each with an inline reply field and Send.

  • Pro

    A merchant review inbox for a greenhouse-kit maker: Tabs for All, Needs action and Replies with counts, a Mark all as read button and full-width ruled rows under day dividers with inline Approve, Reply and Mark read.

  • Pro

    Reply templates for a bike-repair shop: vertical Tabs for four categories with counts, the templates in each, a Select for the review being answered, an editable Textarea, a preview with marked variables and a Copy button.

  • Pro

    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.

  • Pro

    A support-survey score whose definition you can change: a segmented control picks which scores count as satisfied, and a rolling percentage, a five-part bar with a bracket and five counted cells follow.

  • Pro

    A keyboard triage queue for a marketplace: eight held reviews with a progress line, and the review in focus with Approve, Reject and Escalate, each on a key, a polite status line and Undo.