shadcn.io is not affiliated with official shadcn/ui
Renewal Delta Callout Stats Block for Svelte
A subscription renewal comparison that leads with the percent change at display size, then the month before and this month as two tiles.
Installation
Overview
A change-first comparison for Svelte with Ark UI. Deltaleaf, a subscription product, counts who renewed against the month before and leads with that change: a start-aligned header, then a centred percent at display size with an arrow in the foreground, and the line it comes from ("from 6,210 to 7,352 renewals"). Under that, the month before and this month sit in two tiles that run from rail to rail and end the block, so the next section's top rule closes them. On a phone the change stays first. The percent and the difference are computed from the two counts. It's built from SlidingNumber, Badge and Guides. The arrow and the sign carry the direction, with no green or red.
FAQ
How do I change the two months?
Edit BEFORE and AFTER at the top of the file, the renewal counts for the month before and this month. The difference, the percent and both tiles are read from those two numbers. The percent is the difference as a share of the month before, rounded to one decimal.
Why is the change above the two months?
The change is the point of the block, so it is set in display type and the two periods are the evidence under it. The tiles stay a pair: they don't sit beside the percent, and on a phone the percent is still the first thing in the figure.
Why isn't the rise green?
A rise in renewals is good news; a rise in churn would not be. The block shows the direction with an arrow and a plus sign, in the text colour, and leaves the judgement to the reader. That stays correct in every theme preset.
Is the callout accessible?
Yes. The percent is text, with the arrow hidden from assistive technology because the plus sign says the same. The two tiles are a description list: the period badge is the term and the count is its description, with "renewals" available to a screen reader. Signed figures are kept left to right. The percent and this month's count roll visually; a screen reader hears the final numbers immediately.
Why is there no line under the tiles?
The tiles end the block. On a page, the next section draws its own top rule along their foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The band's top rule comes from the Guides component. If nothing follows the block, add a bottom border to the list's wrapper.
How does it fit on a phone, and what moves?
The change stays first, at a slightly smaller display size, and the two tiles stay side by side under it. Nothing scrolls sideways at 320 pixels. The header and the change fade up once when the page loads, and the percent rolls once it scrolls into view. With reduced motion the fade is off and the digits change in place. The tiles themselves don't animate.