shadcn.io is not affiliated with official shadcn/ui
Recovery Step-Down Integration Block for React
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.
Installation
Overview
An integration stats section for React with Base UI, written for Dunlark, a fictional failed-payment recovery tool, and its Stripe connection. A compact header carries the title, one sentence with the share recovered and the mark pair at its end. Then one framed figure. A strip at its head holds the recovered share as a big rolling number and three counts (failed, recovered, lost). Under it, the way the money comes back is drawn as a step-down: a bar for every failed payment, then a bar for each attempt that won some back, floating where the bar above it stopped so the bars shorten and step toward the baseline, and a hatched bar for what was never recovered, joined by hairlines. Every count, share and bar is worked out from four typed numbers, and the shares are made to add up to exactly 100. It's built from Guides and SlidingNumber with plain CSS for the bars and your theme's tokens for every colour, no hue. Stripe is named in text only: no Stripe 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?
FAILED is the number of failed payments and WON_BACK lists how many came back on the first, second and third attempt. The lost count, every share, the recovered share, the counts in the strip and each bar's start and length are worked out from them; change a number and everything moves together. Add an entry to WON_BACK for a fourth attempt and a row appears.
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 Stripe?
No. The counts are typed example data. A real version would count your own recovery records: the payments Stripe reports as failed through its invoice events, and the attempts your schedule makes on them.
How do screen readers get the chart?
Each bar's row is text: its label, its count and its share ("Recovered, attempt 1, 123 · 41%"). The bars, the hairlines and the scale are hidden from assistive technology. The figcaption names the chart, and the strip's counts are a real description list.
How does it behave on a phone and in right-to-left layouts?
On a phone each row puts its label and counts on one line with the bar under it at full width, and the joining hairlines are left out. The bars keep their own direction in a right-to-left layout because the scale runs one way, while the labels, counts and strip mirror.
Related
- Pro
Dunning Schedule Detail Integration
Scopes and stepsAn integration detail section for a failed-payment recovery tool connecting to Stripe: the dunning schedule as four hairline cells, a None, Read and Write table of what a restricted key allows, three steps and a Connect Stripe Shine Button.
- Pro
Recovery Queue Table Integration
Synced tablesAn integration list section for a failed-payment recovery tool connecting to Stripe: a real table of six failing subscriptions with plan, amount, attempts, next retry and decline reason, a row menu (Retry now, Email customer, Pause dunning) and a tally worked out from the rows.
- Pro
Retry Schedule Cards Integration
Cards and previewsAn integration grid section for a failed-payment recovery tool connecting to Stripe: three radio cards in shared hairlines, each drawing its retry schedule on a 14-day line, with a check and an inset rule on the chosen one.
- Pro
Time to Approve Histogram Integration
Bars and columnsAn 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
Delivery Outcomes Donut Integration Stats
Rings and talliesAn 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.
- Pro
Donut Pill Legend Stats
Parts of a wholeA 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.