Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Data Retention Plan Billing Block for Vue

Three retention choices beside a bar of 365 days, solid for what is held today and dotted for what a longer plan still has to fill, with the date it is full and the first charge.

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

Be honest that longer retention starts today, with this data retention plan panel for Vue with Ark UI. A list at the start offers 30 days (included), 90 days (+$29 a month) and 365 days (+$89 a month) as real radio buttons, and the cell beside it draws the 365 days Logwick can hold as one bar: the 30 days held today are solid, the days a longer plan still has to fill are dotted, and the rest is empty. Under it, "Full 90-day history on Jan 13, 2027" is worked out from the date of the data, a line says that data older than 30 days is already deleted and will not come back, and two cells give the monthly price and the change with its first charge date. On a phone the list becomes a Native Select over the bar. Shine Button reads Switch to 90 days, and is disabled on the plan you already have. The frame is ruled by Guides. It's built from native radios, Native Select, Shine Button and Guides, with a CSS entrance only. For log, analytics and audit products that sell history.

FAQ

How do I change the choices and prices?

Edit OPTIONS (days, an id and a monthly price in dollars) and the constants AS_OF, NEXT_BILL, HELD (the days of logs you hold today) and MOST (the bar's full width). The date a window is full is the date of the data plus the days it still has to fill, and the bar widths are shares of MOST.

Why does it say the old data will not come back?

Because it is true for most log stores: a longer window only keeps what arrives after you switch, so the dotted part fills one day at a time. Saying so before the purchase avoids a support ticket afterwards. If your product can restore from archives, change that sentence and the bar.

What stays local, and how do I make it real?

Switching only moves the "your plan now" tag and writes a status line ("Switched to 90 days in this demo. Nothing is retained."). Nothing is kept or charged. To make it real, post the chosen window to your billing API, take the held days and the new full date from its response, and keep the current plan when the call fails.

How do the choices work by keyboard?

The three radios are one group: Tab enters it, the arrow keys move and select, and the chosen row shows a visible ring. On a phone the select is a normal select. Both read the same state, so resizing the window keeps the choice.

Does it work right to left?

Yes. The cell borders, the bar and its key use logical sides, prices and the bar are kept left to right so the numbers read correctly, and dates and counts are wrapped so a mixed sentence does not scramble.

All 167 billing blocks