Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Saved Address List Billing Block for Solid

Saved billing addresses where the primary one sets the tax: choosing a primary re-derives the tax on a 50.00 invoice, the primary cannot be removed, and the others can be removed with Undo.

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

Show what changing the primary address costs, with this address list for Solid with Ark UI. A hairline frame with a plus mark on each corner lists three saved addresses as radio rows (Headquarters in California, a London office, a Berlin studio), each with its address and its tax rule: 8.625 percent sales tax, 20 percent VAT, 19 percent VAT. The saved primary wears an outline Badge. Choosing another row changes the figure under the list, the tax on a 50.00 invoice, and a sentence says what it was and what it would be. The primary cannot be removed and its row says so; the others have a ghost Button, "Remove", that becomes "Undo" in the same place. A Shine Button, "Save primary address", is the only colored control. It's built from Badge, Button, Shine Button and Guides, with a CSS entrance only. For B2B ordering portals, invoicing settings and any account with more than one billing entity.

FAQ

How do I fill it with the account's addresses?

Edit ADDRESSES. Each has an id, a name, the lines of the address, a rate as a fraction of the net and a rule in words, and SAVED_PRIMARY names the one that is primary when the page loads. The invoice size is INVOICE; the tax on it is worked out from the rate, so the figure and the sentence follow the data.

Why can the primary not be removed?

An account without a primary has no tax rule, so the row shows "Saved primary" in place of its Remove button. The row you have chosen but not saved is locked the same way until you choose another. To move the primary, choose another address, save, and then remove the old one.

What do Remove and Undo do?

Remove marks an address as removed in this page: its row keeps its place and its height, says "Removed in this demo." and cannot be chosen, and the same button now reads Undo. Nothing is deleted. To make it real, delete the address from your server in toggle and keep the Undo for the short window your product allows.

What does Save primary address do, and what stays local?

It makes the chosen row the saved primary, moves the badge and says "Saved in this demo." Without a change it says the address is already primary. The rates are the ones typed in the data: the block calculates nothing for a real jurisdiction, and a real tax engine should work out the tax from the address on your server.

Is it accessible?

The rows are a named radio group, so arrow keys move the choice, and each Remove or Undo button names its address. The badge is text, not a color. The status line is a polite live region, and addresses and amounts are set left to right inside right-to-left pages.

How does it look on a phone?

Each row stacks its address over its Remove button, the tax figure follows the list, and the foot with the button and the status line stays pinned at the bottom of the screen while the panel is in view.

All 167 billing blocks