Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Version Adoption Dashboard Block for React

Five app versions with users, a share bar, crash-free rate and a Current, Previous or Outdated status, and a Minimum version select that shows who a forced update would block.

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

Decide how far back to support, with this version adoption panel for React with Base UI. A hairline frame with a plus mark on each corner lists five Sunsetter app versions (4.8.0, 4.7.3, 4.6.x, 4.5.x and 4.4.x and older) with their release day, the users who opened them this week as a bar to scale, their crash-free rate and a status: Current, Previous or Outdated. A Native Select in the header sets the minimum supported version. Every version below it reads "Would be blocked" with a hatched bar, and the figure above the list gives the share of users that would be locked out, how many people that is and how crash-free their sessions are. It's built from Native Select, Badge and Guides, with hand-built bars. For release managers and mobile teams.

FAQ

How do I fill it with my versions?

Edit VERSIONS, newest first: each has a label, the users and sessions of the last 7 days, a crashFree percent and a released day. The status is the row's place in the list (Current, Previous, then Outdated), and the share bars, the blocked totals and the sentence are worked out. OPTIONS is the list of versions you can pick as the minimum.

How is the blocked share worked out?

Every version older than the one you pick counts. Their users are added up and divided by everyone, and their crash-free rate is the mean weighted by sessions, so a small version with many sessions counts for more than its user count suggests.

What stays local, and how do I wire it for real?

Everything: the numbers are typed and no gate is enforced or sent to an app. To make it real, count users and sessions by app version from your analytics, and ship the chosen minimum to the setting your apps check at launch, with a message that links to the store.

Why is there no colour for blocked?

The panel follows your theme and keeps colour for dots and icons, so a blocked row is shown with a hatched bar, a ban icon and the words "Would be blocked", which also read to a screen reader.

How does it look on a phone?

Each version becomes three lines: the name and its status, the bar, then users and the crash-free rate. The figure and sentence above the list keep their height as you change the minimum.

All 200 dashboard blocks