Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Cloud Storage Product Card Block for Radix UI

Three storage plan tiles that each hold the same 78.4 GB of files as a stacked bar, say how full the plan would be or by how much it is too small, and mark the plan that fits.

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

Put a person's own files on every plan with this cloud storage card for React with Radix UI. A hairline frame holds three tiles (Free 15 GB, Plus 200 GB, Pro 2 TB), each marked at its corners by Guides. Each tile holds the same typed 78.4 GB as one stacked bar of Photos, Videos and Documents in foreground weights, and says "39% used" or "Over by 63.4 GB". The smallest plan that keeps a quarter of its space free is marked "Fits you". Choose is an outline Button with an Undo; a plan that is too small answers in the status line instead of choosing. Sizes are whole tenths of a GB and every percentage is worked out from them. For storage, backup and hosting plans. On a phone the tiles are a row you swipe.

FAQ

How do I change the files and the plans?

Edit KINDS (the size of each kind of file, in tenths of a GB, and where it starts in the bar) and PLANS (the capacity in tenths and the price in cents). The 78.4 GB, the percentages, the overage and the plan that fits are all worked out from them.

How is the plan that fits chosen?

The first plan, in order, that keeps at least 25 percent of its space free. The share is FREE_SHARE. The check uses integers, so there is no rounding at the edge.

What happens on a plan that is too small?

The bar fills the whole width, the tile says how many GB over it is, and Choose answers in the status line that the plan is too small. The button stays in place, marked as not available, so keyboard and screen reader users can still reach the reason.

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

The choice is page state; nothing is bought or stored. Replace the body of choose with a call to your billing, and read the used bytes from your storage service instead of the typed 78.4 GB.

How does it look on a phone?

The tiles become a row you swipe sideways, each about four fifths of the width so the next one shows. The row is a focusable region, so the arrow keys scroll it.

Is it accessible?

Each bar is a named image that says how much is stored and the verdict in words, the verdict is also printed as text, and the plan that fits is marked with a word and a check, never colour alone.

All 100 product cards blocks