Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Partner Discount Billing Block for React Aria

A partner program finder: a searchable list of eight programs, the chosen program's terms and who qualifies, a partner ID checked against its shape as you type, and a list of the benefits active on the account with the one that applies first.

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 customers claim the benefit of a partner program, with this partner discount section for React with React Aria. A Combobox searches eight programs; choosing one fills a short list of its terms (what it gives, how long it lasts, who qualifies) and tells the Input under it what a partner ID looks like for that program, such as FP- and six digits, checking the shape as you type. The Shine Button, "Redeem", adds the program to a list of active benefits, each with what is left and the date it ends, and marks the one that applies first, since only one program applies to each invoice. Problems are written next to the field and focus moves to it. Guides draw the frame. For hosting, developer tools and any product with partner perks.

FAQ

How do I use my programs?

Edit PROGRAMS: each has a name, a two-letter prefix for its partner IDs, what it gives, how many months it lasts and who qualifies. STARTING is the list of benefits already active. The combobox, the terms and the ID shape all come from PROGRAMS, so nothing else needs to change.

What is checked about the partner ID?

Only its shape: the program's letters, a dash and six digits (FP-123456), in any letter case. The line under the field says how many characters are missing and, once the shape fits, says plainly that nothing is checked with the partner. Redeeming without a program, with an ID of the wrong shape or for a program already on the account puts a message on the field and moves focus to it.

How does the program search work?

Typing narrows the list to programs whose name contains the text; arrows move through it, Enter picks one, and a clear button empties the choice. The list is Ark UI's combobox with a filtered collection.React Aria filters as you type and shows a message when nothing matches. An empty result says "No program with that name here."

What stays local, and how do I redeem for real?

Redeeming only adds a row to the list and says "Recorded in this demo. No partner was asked." Any ID of the right shape is accepted here. In your product, send the program and ID to your server, ask the partner to confirm the member, and add the benefit only when they do.

Which benefit applies first?

The one that ends first. The list is sorted by end date and the first row gets an "Applies first" badge once there is more than one. The end date of a new benefit is the day it is redeemed plus the program's months.

How does it look on a phone?

The form is one column, the terms stack label over value, and each active benefit wraps its end date under its name.

All 167 billing blocks