Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Delivery Outcomes Donut Integration Stats Block for React

An integration stats section for a clinic reminder tool connecting to Twilio: a hand-built donut of how reminders ended, with a legend of counts and shares, and three cells for the top reasons a text did not arrive, in words, all worked out from typed counts.

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

An integration stats section for React with Base UI, written for Chimewell, a fictional appointment-reminder tool for clinics, and its Twilio connection. A compact header carries the title, one sentence with the delivered share and the mark pair at its end. Then a grid of hairline cells whose outer lines run past the rails. The first cell is a hand-built donut of how the reminders ended (delivered, undelivered, failed) with the total in its centre and a legend that gives each count and share; the arcs differ by weight, never by hue. Beside it, three cells give the top reasons a text did not arrive, in words, each with its count, its share of the texts that did not arrive and a thin bar. Every count, share and arc is worked out from typed numbers, the shares are made to add up to 100 and the reasons add up to the texts that did not arrive. It's built from Guides with an inline SVG and plain CSS and your theme's tokens for every colour. Twilio is named in text only: no Twilio logo, colour or wordmark ships with the block. The counts are example figures for the last 28 days.

FAQ

How do I change the figures?

OUTCOMES holds the delivered, undelivered and failed counts, and NAMED the counts of the first two reasons. The total, the shares, every arc, the delivered share in the header and the number of texts that did not arrive are worked out from them, and the last reason (the landline) is whatever remains, so the reasons always add up.

Why do the shares always add up to 100?

Shares are rounded with the largest-remainder method: every share is rounded down and the few points remaining go to the rows with the biggest remainders, so the rows never add up to 99 or 101.

Is any of this read from Twilio?

No. The counts are typed example data. A real version would count the status updates Twilio sends about each message, and group the reasons from what it reports; here they are written in words rather than numeric codes.

How do screen readers get the donut?

The donut is a drawing hidden from assistive technology. The same figures are a labelled list beside it, with each outcome's count and share in text, and the reasons are a second labelled list. The figcaption says the figures are examples.

How does it behave on a phone and in right-to-left layouts?

On a phone the donut and its legend come first, with the legend under the ring, and the three reasons stack under them. In a right-to-left layout the cells mirror; counts and shares keep their own direction.

  • Pro

    Delivery Receipts Search Integration List

    Synced tables

    An integration list section for a clinic reminder tool connecting to Twilio: a real table of eight reminders with a four-tick delivery glyph and a word for each state, a reason in words for the ones that did not arrive, and a search that marks the matching characters.

  • Pro

    Number Picker Integration Grid

    Cards and previews

    An integration grid section for a clinic reminder tool connecting to Twilio: six available numbers as radio cards in shared hairlines, filtered by a segment group (All, Local, Toll-free) and an area-code combobox, with a polite status line that says how many show and which one is reserved.

  • Pro

    Reminder Thread Integration Detail

    With a product drawing

    An integration detail section for a clinic reminder tool connecting to Twilio: a reverse split with a patient's phone drawn in outline showing a reminder, a one-letter reply and the confirmation, a connect action, what it sends, reads and never reads, and three steps.

  • Pro

    Recovery Step-Down Integration

    Bars and columns

    An integration stats section for a failed-payment recovery tool connecting to Stripe: a framed step-down chart of failed payments, a bar for each attempt that won some back and a hatched bar for what was lost, with a big recovered share and three counts worked out from four typed numbers.

  • Pro

    Time to Approve Histogram Integration

    Bars and columns

    An integration stats section for a spend approvals tool posting to Slack: a reverse split with a framed histogram of how long approvals took, a solid hairline at the median, and a list of figures worked out from the six bucket counts.

  • Pro

    Donut Pill Legend Stats

    Parts of a whole

    A traffic-source donut over a row of pill toggles: switch a source off and its arc leaves the ring, the others grow to fill it, and the shares and the total in the middle are worked out again.

All 100 integration blocks