Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Billing Setup Onboarding Block for Radix UI

A billing-day step as a whole screen: three days to choose from beside a drawn strip of October and November 2026, with the first invoice prorated from typed dates and the next one named.

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

Let new customers pick the day their invoices fall on, with this billing step for React with Radix UI. It is a whole screen of Ferrywick, a subscription-box platform: the page's rails and one band, a step header ("Step 6 of 7" and a hairline), and a framed panel. A Segment Group offers three days (the day I start, the 1st of each month, the 15th); beside it a strip of October and November 2026 rings the start day, shades the days the first invoice covers and fills each invoice day. Under the choices, three lines work out the first invoice from typed dates for a $19 plan ("1 Nov: $11.03 for 14 to 31 Oct") and name the next. No card is asked for: it says to add one next. The one Shine Button is Continue, with a ghost Skip for now.

FAQ

How is the first invoice worked out?

Invoices bill in arrears, on the billing day. Starting on 14 Oct with the 1st chosen, the first invoice is on 1 Nov for the 18 days from 14 to 31 Oct: $19 times 18 over 31 days, $11.03. The 15th bills one day on 15 Oct ($0.61), and the day you start bills the full $19 on 14 Nov for 14 Oct to 13 Nov. The days are counted from typed dates with Date.UTC, never the clock.

How is the strip read?

Each month is a plain grid of days, Sunday first. The start day has a ring, the days the first invoice covers are shaded, and invoice days are filled, with a key under the strip. The strip is a picture of the lines below it, so it is hidden from screen readers; the three lines carry the same facts in words.

Why is today fixed?

The block treats 14 October 2026 as today (AS_OF) so the figures and the picture are the same on every visit and on the server. In your app read the real start date and the plan price, and pass them in the same way.

What stays local in the demo, and how do I wire it?

Everything: nothing is charged and no card is read. Continue says "Saved in this demo. Add a card next." In your app send the chosen day from next, create the subscription with that billing anchor, and take you to the card step.

Can I use it from the keyboard?

Yes. The three days are a segmented group: Tab enters it and the arrow keys move between the days, which choose as you go. The strip has nothing to focus.

How does it look on a phone?

The strip moves above the choices, with the two months one under the other, then the choices and the three lines; Continue pins to the bottom of the screen.

All 100 onboarding blocks