Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Account blocks

Pro

Plan Security Comparison Account Block for React

What a plan changes for an account's security, with no prices: pick Free, Pro or Business and see only the controls that differ from the current plan, each with its old and new value and Gain or Lose.

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

Show what moving to another plan would change for security, not for the bill, with this plan comparison section for React with Base UI. A hairline frame with a plus mark on each corner opens with a Toggle Group of Free, Pro and Business, Pro marked Current. Below it, only the controls that differ from the plan you are on are listed: audit log history, single sign-on, open sessions, security keys, allowed IP ranges and password rules, each with what it is now, what it would be and Gain or Lose in an arrow and a word. Choosing the current plan shows an empty state instead, and a line at the foot sums the change ("Business adds 4 controls and removes none") and how many stay the same. The panel keeps its height whichever plan shows. It's built from Toggle Group, Empty, Badge and Guides, with a CSS entrance only. For the account or plan page of any product that sells security features.

FAQ

How do I change the controls and plans?

Edit PLANS (the toggle's items, in order) and CONTROLS. Each control has a name, a sentence, a values list with what each plan has in words, and a ranks list with how much each plan has as numbers; the same order for both. A higher rank is a gain. Set CURRENT to the plan the account is on. A control whose rank is the same on both plans drops out of the diff and into the "stay the same" count, so every sentence is worked out from the data.

Does choosing a plan change anything?

No. The toggle only changes what the page compares, and the status line says what would change. There is no button to switch plans, because that belongs to your billing flow: link to it from the foot once you have it, and keep prices out of this view if you want it to read as a security page.

Why Gain and Lose in words?

A comparison that relies on green and red fails people who can't tell them apart, and a lost control is not an error. The arrow and the word say it, the old and new values are written out, and a screen reader hears "Now" and "On Business" before each value.

Why doesn't the panel jump between plans?

Free and Business differ from Pro in different numbers of rows, and Pro shows none. An unseen copy of the longest list sits in the same grid cell as the live one, so the panel keeps the height of the longest and the foot stays where it is.

How do I use the toggle from the keyboard?

Tab reaches the group, arrow keys move between plans and the list updates as you go. The group always has one plan chosen, so there's no empty state to get stuck in, and the live line at the foot is read out when the plan changes.

All 100 account blocks