shadcn.io is not affiliated with official shadcn/ui
Version Mismatch Ruler Error Block for React
A full-height page for a web app tab running a retired version: a ruler of five releases with the supported range shaded and You are here marked, a radio group to read each release, three changes in 5.0 and a reload button.
Installation
Overview
Tell people why a tab stopped saving, and what to do, with this version mismatch block for React with Base UI. It's the page Coinhurst, a budgeting web app, shows a tab running an old release: the page's rails run its full height and one band crosses the screen. The mark, the heading, one sentence that names the version the tab runs and the one it needs, and a Shine Button "Reload to update", the only colored control, come first. Under them a ruled band runs from rail to rail with a plus mark at each end and draws the supported versions as a ruler: five releases on a hairline, the supported range shaded from 5.0 onward and labelled, "You are here" over 4.8, and "Needed: 5.0 or later" in words. The releases are a native radio group: pick one to read its status in a line below. Then a ruled list gives what changed in 5.0, with one row tagged "Breaking" in a Badge. It's built from Shine Button, Badge and Guides, with a CSS entrance only. For web apps and dashboards that ship often and retire old clients.
FAQ
Why is there no progress bar?
A web app updates by reloading the page, so there is nothing to download or install in steps, and a bar would be made up. Reload to update waits 600 ms behind a busy button and then says "Reloaded in this demo; nothing changed", because the demo has no newer build to fetch. In your app, make the button call location.reload(), or better, activate a waiting service worker first so the reload really lands on the new version.
How does the ruler work?
The releases are typed in RELEASES, with the first supported one and the version of this tab beside them; the shading, the words under each stop ("Retired", "Supported", "Latest") and the "You are here" flag are all worked out from those. The ruler is a row of native radios: Tab reaches the group, the arrow keys move between releases and the line below reads the status of the one you picked. It stays left to right in a right-to-left page, because versions run in time order.
Does the ruler fit a phone?
Yes: five stops at 51 px each fit even at 320 px, and the "You are here" flag is a small pill that hangs over its neighbours rather than wrapping. The shading runs to the end rail, so "and later" is open ended.
What are the three changes for?
They answer "what do I get for reloading?" and "will I lose anything?". The breaking one is tagged with the word "Breaking" and not only a style, and it says what stops working for old tabs. Fill them from your release notes, and keep the breaking change first.
Where does the server say a client is too old?
In the response: return a 426 Upgrade Required or a 409 with an error code your client understands, and show this page when the client sees it. A page can't know the server's rule by itself: SUPPORTED_FROM is typed here, and in your app it should come from the same place the server reads.
Related
- Pro
Feature Flag Eligibility Error
Plans and checkoutA full-height page for a feature that is not on for your workspace yet: three conditions ruled from rail to rail, a rollout meter with the next wave, and a Switch that joins early access and flips the last condition.
- Pro
Planned Maintenance Progress Error
MaintenanceA full-height maintenance page for an online bank that shows a five-segment progress bar with the window's start and expected return, and a Check again button that reports a typed result.
- Pro
Scheduled Downtime Panel Error
MaintenanceA maintenance notice for a payroll service as one framed panel: a clock you scrub through the 02:00 to 06:00 UTC window drives the time left, a progress bar and four tasks that read Done, Running or Queued.
- Pro
Region Migration Status Error
MaintenanceA full-height status page for cloud storage moving an account between regions: a drawn move whose dashes run three cycles, and an accordion of five steps that each say what they do and what stays available.
- Pro
Under Construction Notify Error
MaintenanceA full-height holding page for a marketplace that is not open yet: an email form that checks itself and notes the address in place, beside the four phases of the build as a vertical Steps with a bar for the schedule.
- Pro
Beta Ended Error
MaintenanceA full-screen page for the end of a beta: a drawn tester card with figures counted from dates, a perforated discount ticket with a copyable code, and a Claim 35% off button that recomputes the first-year price from whole cents.