shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Put a person's own files on every plan with this cloud storage card for Solid with Ark 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.
