shadcn.io is not affiliated with official shadcn/ui
Billing State Sidebar Block for Vue
A self-serve billing area in a fixed-height window whose muted sidebar reacts to the account's state: a segment group sets Active, Past due or Trial, adding 1 unpaid to Invoices, a Fix payment link, or a Trial countdown with an Upgrade link.
Installation
Overview
Let the navigation tell people what needs attention with this SaaS billing sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar in the theme's muted tone with four billing sections: Overview, Plan, Invoices and Payment method. A Segment Group on the page sets the account's state. Past due puts a 1 unpaid badge on Invoices and a Fix payment link at the top of the rail; Trial puts "Trial: 9 days left" there with an Upgrade link and leaves Invoices empty; Active is plain. The top slot holds the same two lines in every state, so the links below never move. The page is the open section, with the invoice list as its main view, and the top bar's one action follows the state: Pay invoice, Change plan or Upgrade. Folded to icons the rail keeps four section icons with tooltips, and on a phone it is a sheet. It's built from Sidebar, Segment Group, Status, Empty, Button, Shine Button, Avatar and Guides, with a CSS entrance only. For billing areas, account settings and any navigation that should follow a customer's state.
FAQ
How does the segment group change the sidebar?
It sets one account state, and everything else is worked out from it: the top slot's words and link, the badge on Invoices, which invoice is Past due, the page's action and whether Invoices has anything to list. The Invoices link's accessible name carries the count, for example "Invoices, 1 unpaid", and the badge is decorative.
Why does the top slot always take the same room?
So switching state never moves the links under it. In Active the slot shows the plan in one line and the link beneath it is hidden and out of the tab order; in Past due and Trial the same two lines carry the warning and the link. A warning dot marks Past due, and the words say the rest.
What does Pay invoice do?
In the Past due state it marks the unpaid invoice as paid in the page and moves the account to Active, with a status line saying nothing was charged. It is the one primary action; Fix payment opens the Payment method section instead.
How are the sections wired?
The sections are links to # whose handler shows the page instead of navigating. Point them at your routes and mark the current one with isActive and aria-current.
What stays in the page, and how do I connect it?
Everything. The invoices are typed in INVOICES, the account state lives only in the block's state, and nothing is charged. The card is shown as "Card ending 4242" and the block never takes a card number. The block sets persist={false} and shortcut={false}, so it writes no cookie and leaves Ctrl and Command with B to the page it sits on. To connect it, load the account's state and invoices from your billing provider, use the provider's hosted fields for payment details and keep the badge, slot and page worked out from the state.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Switching the account state on the page updates the sheet's links, so the badge and the top slot are there the next time you open it. Choosing a page closes the sheet and puts focus back on the button, and the status line under the page says what changed.