Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Early Renewal Bonus Billing Block for Radix UI

Renew sooner for more credits: a 0 to 30 day slider with steps at 7, 14 and 30 days (+200, +500, +1,000 credits), the renewal date, the bonus reached and the new end of term, all derived from the slider.

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

Reward the customers who renew early, and show them it costs nothing, with this renewal section for React with Radix UI. A hairline frame with a plus mark on each corner holds a Slider for how many days before the term ends the account renews, from 0 to 30. A ruler under it marks the three steps: +200 credits at 7 days, +500 at 14 and +1,000 at 30, and an outline Badge names the bonus reached. Three cells below give the renewal date, the new end of term and the days you lose, always 0, and a sentence says renewing early adds a year to the term. The only Shine Button follows the slider ("Renew on 1 Dec 2026, +500 credits") and sits in a foot with a status line. Built with Slider, Badge and Guides. For data, API and other term-based subscriptions.

FAQ

How do I change the steps and the dates?

STEPS at the top of the file lists each step's days and bonus credits, TERM_END is the last day of the current term and NEW_END the end after renewal, all as ISO dates. The renewal date is TERM_END minus the slider's days, worked out in UTC, and the bonus is the largest step the slider has reached.

Why does it say I lose no days?

Renewing early starts the new year at the end of the current term, not on the renewal day, so the days between renewing and the old end still belong to you. The new term ends on the same date a year after the old one. If your product restarts the term on the renewal date, change the sentence and the cells, and NEW_END.

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

Renew only sets a state and says "Renewed in this demo. Nothing was charged." in the status line. In your app, call your billing provider in renew with the date, add the credits from its answer and show its result in the same status line.

How is the slider wired on each library?

The Slider reports a list of one number and takes its name from an invisible label.Its spoken value is "14 days early, 500 bonus credits", and its track and thumb are foreground, never the primary color. The slider stays left to right on a right-to-left page, since the ruler is a time scale.

How does it look on a phone?

The slider and its ruler fill the width, the three date cells stack, and the status line and the Renew button stay pinned in a foot at the bottom of the screen.

All 167 billing blocks