Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Purchase Order Form Billing Block for Solid

Attach a purchase order to a subscription: a PO number checked against its pattern, an amount, a valid-until date and an email, over a bar showing how many monthly invoices it covers.

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 a customer pay by purchase order and see what it buys, with this PO form for Solid with Ark UI. A hairline frame with a plus mark on each corner, ruled by Guides, holds four fields: a PO number checked against PO-2026-04817, the amount the PO covers in a Number Input, the last day it is valid in a date Input, and the email invoices go to. Under them a figure draws the PO as a bar with the monthly invoices that fit as slices, and writes it out: "Covers 10 monthly invoices, through 12 Aug 2027". If the valid-until date comes before the amount runs out, a warning says how many more would have fit. Four facts sit under the bar: the first invoice, each invoice, how much of the PO is billed and how much is left. The Shine Button attaches the PO. For B2B plans, annual contracts and any billing page that accepts purchase orders.

FAQ

How do I change the invoice size, the schedule and the PO pattern?

Edit INVOICE (the monthly amount) and FIRST (the day the first invoice is due; each later one is a month on). The PO pattern is PO_PATTERN, and START holds the values the fields open with. The figure never draws more than MOST invoices.

How is the coverage worked out?

Two limits apply and the smaller wins: how many invoices fit under the amount (the amount divided by the invoice size, rounded down), and how many fall due on or before the valid-until date. The bar is the whole PO, each slice is one invoice and the grey end is what is left. When the date is the smaller limit, the warning says so.

When are the fields checked?

The PO number is checked when you leave it and again on submit; the rest on submit. Each problem sits under its field in a slot that is always there, and the first one takes focus. The amount must cover at least one invoice and the date must not come before the first one.

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

Attach PO checks the form and says "attached in this demo"; nothing is sent or saved. Replace the end of submit with a call to your billing system, and treat the PO number and amount as untrusted input on the server too.

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

Each field has a label, a hint where it helps and its problem tied to it. The bar is decoration; the sentence under it and the four facts carry the same numbers, and one polite status line reads the result of the submit.

How does it look on a phone?

The fields stack in one column, the bar runs the full width with the slices shrinking to fit, the facts fall into two columns and the foot with Attach PO rides the bottom of the screen.

All 167 billing blocks