Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Portal Link Billing Block for React

Share a scoped, expiring link to the billing portal with your accountant: pick what they see and for how long, copy the link, and revoke it later from a list of links you made.

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

Give an accountant or a colleague a way into the invoices without a login, with this portal link section for React with Base UI. A hairline frame with a plus mark on each corner, ruled by Guides, holds two Native Selects, what they can see (invoices only, or invoices and payment methods) and how long the link works (1, 7 or 30 days, with the end date worked out from a fixed day), and a Shine Button that creates it. The link appears in a read-only mono field with a Copy Button, the day it expires and Revoke. Under it, "Links you made" lists the earlier ones in a scroll region of fixed height, each with a Badge that says Active, Expired or Revoked and a Revoke button. For accounting tools, agencies and any account with an outside bookkeeper.

FAQ

How do I change the scopes, the lifetimes and the earlier links?

Edit SCOPES, DAYS and EARLIER (each link has a scope, the day it was made, the last day it works and a token), and HOST. The state of each link is worked out from its dates and whether it was revoked, against the typed AS_OF day.

What does Revoke do?

It marks the link Revoked in the list and in the result, turns its button off and says so in the status line. A link that has already expired or been revoked cannot be revoked again. Nothing leaves the page: in your app, revoking must be a call that stops the link working on your server.

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

Copy is real. The link is a sample on an .example host and opens nothing, and the list lives in the page. Your billing provider's hosted portal makes the real link: create it on the server with the scope and the expiry, and return its address to create.

Why does the list scroll instead of growing?

So that creating a link never moves the panel. The list holds about three rows and scrolls past that; the region is a tab stop, so the keyboard can reach the rest.

How does it work with a keyboard and a screen reader?

Both selects are labelled, the copy button announces "Portal link copied", every Revoke button names the link it acts on, and one polite status line reads the result of each action.

How does it look on a phone?

The two selects and the button stack, the result sits under them in the same space whether or not a link exists, and the list scrolls inside its box.

All 167 billing blocks