shadcn.io is not affiliated with official shadcn/ui
Add-on Marketplace Billing Block for Vue
Twelve add-ons in four categories with search, where adding resolves the rules: Audit logs also adds the Security pack it requires, Priority support replaces Standard support, and some need the Business plan.
Installation
Overview
Let people shop for add-ons without breaking the plan, with this add-on marketplace for Vue with Ark UI. A compact header sits over one hairline frame with a plus mark on each corner. A vertical Toggle Group of categories, All, Security, Storage, Support and Automation, with counts, sits beside a search and a region of cards that keeps its height whatever you filter; on a phone the categories are a Native Select. Each card has a price, a line on what it does, the rule that applies to it and an Add or Remove button. The rules are typed into the data: Audit logs requires the Security pack and adds it too, Priority support replaces Standard support, and an add-on that needs the Business plan says so and is not added. A "Your add-ons" band lists the bundle with the new ones marked and the monthly total, and the only Shine Button counts what it will apply, "Apply 3 add-ons". It's built from Toggle Group, Native Select, Input, Empty, Shine Button and Guides, with a CSS entrance only. For plan settings, extensions and app stores.
FAQ
How do I add my own add-ons and rules?
Add an entry to ITEMS with its category, price, the plan it needs, and, if it has one, requires (the id of the add-on it needs first) or replaces (the id of the one it takes the place of). ACCOUNT holds the current plan and the renewal date, and SAVED the add-ons the account has now. The rules, the notes in the status line, the total and the button's label are derived from the data.
What happens when I remove an add-on that another one needs?
The ones that need it go too, and the status line says so: removing the Security pack also removes Audit logs. Adding follows the same chain the other way, so adding Named contact pulls in Priority support, which in turn replaces Standard support.
What does Apply do, and what stays local?
It keeps the picked add-ons as the saved ones and says what the monthly total is from the renewal date. Nothing is charged. In your app, send the ids to your billing provider in apply, and show its answer in the same status line. With nothing changed the button stays focusable and says there is nothing to apply.
Does filtering change the size of the panel?
No. The cards live in a region of fixed height that scrolls and can be focused for the keyboard, so searching or changing category swaps what is inside it. A search with no match shows an empty state with a Clear search button in the same box.