Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Retention Impact Changelog Block for Svelte

A reverse split with two retention curves by days since signup, this release solid and the one it is compared with dashed, a toggle that picks the comparison and the change at day 1, 7 and 30.

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

A retention report for Svelte with Ark UI, written for Retainly, a fictional product-analytics tool. A reverse split behind a divider that runs from the spine's top rule. At the end the copy: a header whose title is worked out from the data ("Day 30 retention rose three points in v9.4"), a toggle group that picks the release to compare against (the previous one, or three releases ago) and a list of terms for day 1, 7 and 30, each with the change in points rolling to its new value and the two readings in words. At the start the figure: two retention curves by days since signup, this release solid and the other dashed, with a dot and a label on this release's curve at each marker day. It's built from Toggle Group, Sliding Number and Guides, with a hand-built SVG and your theme's tokens for every colour. For product launches and release reviews. The readings are example data.

FAQ

How do I change the readings?

Edit RELEASES (newest first) and DAYS. A release holds the percent of a signup cohort still active at each of those days, in order. The curves, the dots, the changes and the title are worked out from them. COMPARISONS says which releases the toggle compares with; MARKS lists the days that get a dot and a row.

What does the toggle do?

It chooses the release the newest one is compared against. The dashed curve and its dots are redrawn, the three changes roll to their new values and a polite line says the day 30 result. This release's curve never changes. The choice stays local to the page.

Is the chart accessible?

The drawing is hidden from assistive technology. A table with a caption holds every reading for every release at every day, and each change is also written in words ("up 5 points") for screen readers. This release is solid and the comparison is dashed, so they are told apart without colour.

What are the curves between the readings?

A smooth curve through the typed readings that never rises above its higher neighbour, so it bends between readings without inventing a bump. Replace the readings with your own cohort data and the curve follows.

How does it fit on a phone and in a right-to-left layout?

Below the desktop width the order is the header, the chart, then the toggle and the changes. The chart is drawn left to right in a right-to-left layout too, because time reads that way, while the text and signed changes keep their own order.

All 200 changelog blocks