shadcn.io is not affiliated with official shadcn/ui
Pricing Updates Changelog Block for React Aria
A changelog of plan price changes for a billing tool: four plan rows with the old price struck through, the new one in bold, the day it took effect and a reason, and a Monthly and Yearly toggle that re-reads every price.
Installation
Overview
A pricing changelog for React with React Aria, written for Ratewick, a fictional subscription billing tool. A centred header counts the plans that changed, a two-way toggle group switches between Monthly and Yearly, and four plan rows run from rail to rail and end the block. Each row names the plan and the day its new price took effect, gives a one-line reason, and shows the old price struck through beside the new one in bold, then the change as an arrow, a word and the amount (Up or Down). Switching the toggle re-reads every price for that interval and rolls the new figures in place, so the page never moves. On a phone the reasons are dropped and the prices stack. The page's rails and top rule come from the Guides spine. It's built from Guides, Toggle Group and Sliding Number, with CSS transitions for the entrance and your theme's tokens for every colour. For SaaS pricing pages, billing docs and release notes that need to show what a price change cost. The plans and prices are example data.
FAQ
How do I change the plans and prices?
Edit PLANS at the top of the file, newest first. Each plan has a name, an effective day as an ISO date, a reason, and a monthly and a yearly price, each a from (the old price) and a to (the new one) in whole dollars. The change (Up or Down and the amount) and the count in the header are worked out from those numbers, so they cannot disagree with the rows.
How do I tell the old price from the new one without colour?
The old price is struck through in a muted weight and the new one is bold, and each has a hidden word for screen readers ("Was" and "Now"), so the pair reads aloud as a change. The direction is an arrow and a word, never red and green. Each price is its own left-to-right span, so a right-to-left layout keeps the dollar sign in front of the digits.
What does the toggle do, and does it move the page?
It re-reads every row for the interval you pick: the old price, the new price and the change. The new prices roll to their new digits in place, and every row keeps its height and column widths, so nothing shifts. The choice stays in the component: nothing is sent, and a polite hidden line announces which interval is showing. Arrow keys move between the two options.
Why are the dates fixed?
Each day is written in the data as an ISO date and spelled out by a small helper, never computed from today, so the page reads the same on the server and in every browser, and the time element keeps the machine-readable day.
How does it fit on a phone and in a right-to-left layout?
Below md the reason is dropped, the prices stack with the old one above the new one and the change sits under them, so nothing scrolls sideways at 320 pixels. In a right-to-left layout the rows mirror and the prices keep their left-to-right order.