shadcn.io is not affiliated with official shadcn/ui
Settings Sidebar Nav Billing Block for Vue
Billing settings in a fixed-height window: a sidebar of six sections with a count badge on Payment methods, the chosen section's real rows on the page, and Add payment method in the top bar.
Installation
Overview
Give an account's billing its own settings area, with this billing settings sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Carelark, a clinic-booking app, with six sections in two groups: Overview, Plan and Usage and limits under Account, and Payment methods, Invoices and Addresses under Payments. Payment methods carries a count badge that follows its list. The top bar names the section you are on and holds Add payment method, the only Shine Button, which opens Payment methods and adds a backup Mastercard to this page. The page is quiet: the section's real rows, a name and detail at the start and a value at the end, under the group name and a count. Folded to icons the rail keeps the sections with tooltips, and on a phone it is a sheet opened from the top bar. A status line says what happened. Built from Sidebar, Badge, Avatar, Shine Button and Guides, with a CSS entrance only. For billing and account settings with several sections.
FAQ
How do I change the sections?
Edit SECTIONS for the links and ROWS for the rows of each: a title, a detail and a value. The page, the count line and the badge are all derived from them, and badged says which section carries a badge.
How do screen readers hear the badge?
The visible badge is hidden from them. The link's name carries the count instead, "Payment methods, 2 methods saved", and so does the tooltip on the folded rail.
What does Add payment method do?
It opens Payment methods and adds one backup card, a Mastercard ending 8888, to the list on this page, and the badge becomes 2. Pressing it again says it is already added. Nothing is charged and no card is collected; in your app the button would open your provider's hosted fields.
What happens when the sidebar folds to icons?
The rail keeps the six sections as icons with tooltips, and the badge is dropped from the rail but kept in the tooltip. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays local, and how do I connect it?
Everything: the plan, the invoices, the addresses and the card are typed in the file, and the links are # links that change local state. Point each link at a route in your app and load its rows there.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet opened from the start edge by the menu button in the top bar, the right in a right-to-left layout. Choosing a section closes it and focus returns to the button. The top bar's button shortens to Add method, and the rows stay one list.