Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Instalments Storefront Block for React Aria

An e-bike instalment calculator: a slider of 3, 6, 9 or 12 months, the monthly amount, interest and total worked out in cents, and a dated 30-day payment schedule that always adds up.

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 shoppers see what a big purchase costs per month, with this instalment calculator for React with React Aria. A header says what Haverill, an e-bike shop, offers. The framed panel opens with the bike, drawn and priced, then a Slider of 3, 6, 9 or 12 months with the rate under each stop. Three figures follow: each month, interest in all and what you pay in all. Beside them, a dated list shows every payment 30 days apart, from a fixed day, and says what it adds up to. The foot holds the block's one Shine Button. It's built from Slider, Shine Button and Guides, with a CSS entrance only. For a product page, a cart or a high-ticket checkout.

FAQ

How are the amounts worked out?

In whole cents, never decimals. The interest is simple interest on the full price: the price times the rate times the months over twelve, rounded to a cent. The monthly amount is the total divided by the months, rounded down, and the last payment takes the odd cents, so the schedule always adds up to the total. The line under the figures says when the last payment differs.

Where do the rates come from?

They are typed in TERMS for a fictional lender, Haverill Pay: 0 percent for 3 and 6 months, 9.9 for 9 and 14.9 for 12. A line says it is an illustration with no credit check and no agreement. In a real shop the lender's quote replaces them, and the lender's own wording replaces that line.

Why are the dates always the same?

Every date is counted from a fixed day (AS_OF) in UTC, 30 days apart, so the page reads the same for everyone and nothing depends on the clock. Replace AS_OF with the order date, or use your lender's calendar.

What stays in the page, and how do I connect it?

Everything. The button only notes your choice in the status line: nothing is borrowed, saved or sent. To make it real, send the chosen months to your lender's checkout in the click handler and show its answer in the same status line.

How does it look on a phone?

The figures stack as rows, and the payment dates sit under them in one column. The button is pinned at the bottom of the screen with the status line beside it.

Is it accessible?

The slider has a name and reads out its value as "6 months at 0% APR". The schedule is a numbered list with real dates, the status line is a polite live region, and the bike drawing is decorative. The arrow keys move the slider one stop at a time.

All 100 storefront blocks