shadcn.io is not affiliated with official shadcn/ui
Retry Schedule Cards Integration Block for React Aria
An 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.
Installation
Overview
An integration grid section for React with React Aria, written for Dunlark, a fictional failed-payment recovery tool, and its Stripe connection. A compact header carries the mark pair at its end. Under a band rule, three retry schedules as radio cards in cells that share their hairlines: Gentle, Standard and Daily for a week. Each card draws its schedule on a 14-day line, the failed payment as a hollow dot at Day 0, a solid dot for every retry with its day under it and a bar at Day 14 for the cancel; the days are also written out in text, with the count and span worked out from them. The chosen card reads by a heavier title, a check and an inset rule, never a fill, and arrow keys move the choice. A foot band holds a polite status line, present from load, saying the choice stays on the page and nothing changes in Stripe. It's built from Guides and native radio inputs, with your theme's tokens for every colour. Stripe is named in text only: no Stripe logo, colour or wordmark ships with the block.
FAQ
How do I add or change a schedule?
SCHEDULES holds each one: its name, the retry days and the line about who it suits. The drawing, the days in words, "5 retries in 10 days" and the status line are worked out from the days, so add an entry and it appears as a card. Keep three cards for the three-column layout, or change the grid.
Why native radio inputs?
They give a real radio group with arrow-key movement, one tab stop and form-ready values on every base without per-library code. The title is the label, stretched over the whole card so the card is the target.
Does choosing a schedule change anything in Stripe?
No. The choice only changes the card and the status line. Hook your own save where you store the schedule.
How do screen readers read a card?
The radio is named by the schedule's title and described by the count, the days in words and who it suits; the drawn line is hidden from assistive technology because the same facts are in text. The group is a fieldset with a hidden legend.