shadcn.io is not affiliated with official shadcn/ui
Intercom Stats Integration Block for Radix UI
An integration stats section for a conversation-routing tool and Intercom: a curve of how fast messages get tagged with p50 and p95 marked, a 1, 4 or 10 second cursor and three derived figures.
Installation
Overview
An integration stats section for React with Radix UI, written for Inboxlane, a fictional tool that tags and routes conversations, and how quickly a message in Intercom gets its tag. A split with a divider from the top rule to the foot. At the start, the header ("94% of messages are tagged in 4 seconds") and a framed chart: the cumulative share of 10,000 example messages tagged against seconds (0 to 12), a smooth curve through typed buckets with the median (p50) and the 95th percentile (p95) marked. At the end, the mark pair, a three-way toggle (1, 4 or 10 seconds) that moves a cursor along the curve and rewrites a polite readout ("94% of messages tagged within 4 seconds"), and three figures: p50, p95 and the slowest message. The readout keeps its height whichever threshold is chosen. Every figure, mark and sentence is computed from the twelve typed buckets, so the data stays the single source; a visually hidden table repeats the curve. The data is example data and nothing is read from Intercom. Intercom is named in text only: no logo, colour or wordmark ships.
FAQ
Where do the numbers come from?
From BUCKETS: how many messages were tagged in each second after they arrived, twelve typed counts. The cumulative curve, the share at each threshold, the p50 and p95 (interpolated inside the bucket that crosses them) and the slowest second are computed from it. Percentages are rounded down so a figure never claims 100% before every message is in.
How does the threshold toggle work?
It is a single-choice group that can't be left empty: pressing the chosen one again does nothing. It moves a vertical cursor and a dot along the curve, and the readout, a polite status line, says the new sentence. The sentence's three variants sit in one grid cell with the unchosen ones hidden, so changing the choice never moves the page.
Is the chart accessible?
The drawing is hidden from assistive technology. A visually hidden table lists the share tagged by each second from 1 to 12, the caption says what the curve shows, and the readout and the three figures give the headline numbers in text. The marks are labelled in text, not colour.
How do I use it for another service or product?
The product is PRODUCT and the service is SERVICE, a name and a two-letter mark for its lettermark tile, typed rather than worked out from the name. MarkTile carries a comment where your own logo goes; never redraw a brand's logo. Replace BUCKETS with your own distribution and the chart, thresholds and figures follow.
How does it fit a phone, right-to-left layouts and reduced motion?
Below lg the divider gives way to a rule and the controls stack under the chart. The chart keeps its left-to-right axis in a right-to-left layout, as any time series should, while the columns around it flip. The curve draws in once on load; with reduced motion it simply appears, and the cursor jumps instead of sliding.