Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Delivery Outcomes Donut Integration Stats Block for Solid

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

Overview

An integration stats section for Solid with Ark 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.