Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Data Retention Dashboard Block for React Aria

A retention console for five kinds of stored data: a stacked bar of volume by age, a slider of seven cutoffs, a hatched purge preview with the volume it frees, and a legal minimum check before Save policy.

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

Move a cutoff and see what the next purge would delete, with this data retention panel for React with React Aria. A hairline frame with a plus mark on each corner holds five kinds of Expirynest data (Logs, Events, Backups, Uploads and Sessions) in a list at the start. For the chosen kind a stacked bar draws its volume in four age buckets, and a Slider sets how long to keep it, snapping to 7, 30, 60, 90 and 180 days, one year and two years. The part of the bar older than the cutoff is hatched, a table lists each bucket's volume and what would go, and a line says "Next purge frees 1.8 TB". A kind with a legal minimum says whether the cutoff meets it. For governance consoles and storage settings.

FAQ

How do I use my own data kinds?

Edit KINDS: a name, the gb in four age buckets, the legal minimum in days (zero for none) and its reason. BUCKETS holds the age ranges, STOPS the cutoffs the slider snaps to, and SAVED_START the policy in force for each kind.

How is the purge worked out?

Each bucket's share older than the cutoff is taken as an even part of its volume, so a cutoff in the middle of a bucket frees part of it. The same sum feeds the bar, the table, the header and the sentence, so they always agree.

What happens below a legal minimum?

The line under the slider says the cutoff is below the minimum and why, the kind's row in the list says so too, and Save policy refuses, selects that kind and says which. Kinds with no minimum say so.

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

Volumes are typed and nothing is deleted. Save policy keeps the cutoffs on the page. Send them to your retention job from save, read the volumes from your storage metrics, and keep the legal minimums on the server.

How does the slider work from the keyboard?

The arrow keys move one stop at a time, and the readout and the ruler under it name the cutoff in days. The list is a set of buttons, and choosing another kind does not move focus.

How does it look on a phone?

The list becomes a select above the bar. The bar, slider and table stack in that order, and the hatched part stays visible at 320 pixels.

All 200 dashboard blocks