shadcn.io is not affiliated with official shadcn/ui
Storage Tiering Dashboard Block for React
Three storage tiers with capacity bars, object counts and prices, and six suggested moves between them; approving a move recomputes the bars and the monthly bill, and Approve all does the lot.
Installation
Overview
Move data to the tier it deserves and watch the bill, with this storage tiering panel for React with Base UI. A hairline frame with a plus mark on each corner holds three tier columns on shared hairlines (Hot, Warm and Cold), each with a capacity bar, its object count, its price per GB and how often its data is read. Under them six suggested moves say what moves, from which tier to which, how big it is and what it does to the monthly cost, and one of them promotes data and costs more. Approving a move reworks both bars, the object counts and the total ("Monthly cost $390 to $351 after 3 moves"), and the card reads "Moved in this demo". A Shine Button approves them all. It's built from Badge, Button, Shine Button and Guides. For storage cost reviews.
FAQ
How do I fill it with my own tiers?
Edit TIERS (capacity in GB, price in cents per GB a month, objects, bytes used and how often it is read) and SUGGESTIONS (a label, the tier it leaves, the tier it enters, the size in GB and the objects). The bars, the totals and every saving are worked out from those with integer cents.
How is a saving worked out?
The size in GB times the difference between the two tiers' prices per GB. A move to a cheaper tier saves, a promotion costs more and says so. The monthly total is the sum over the tiers of what they hold times their price.
What if a tier is full?
A move that would put more in a tier than its capacity is refused and the foot says there is no room. Approve all skips such moves and moves the rest.
What stays local, and how do I wire it for real?
Everything: no bytes move and the suggestions are typed. To make it real, build the suggestions from your access logs, send each approval to the lifecycle rule or migration job that moves the objects, and take the capacities and prices from your provider.