shadcn.io is not affiliated with official shadcn/ui
Minimal Single Plan Pricing Block for Vue
The quietest single plan: one card in a card with a launch price beside the struck-out regular price, one call to action and six included features, under a short centred header.
Installation
Overview
Keep it to one plan, one price and one button with this minimal single plan section. A short centred header sits between the page's solid rails, and under it one Frame holds the plan as a card in a card: a raised panel with the plan's name, an outline Badge with the saving, the launch price at large size beside the struck-out regular price, and the section's one primary Shine Button, with a tinted panel beside it listing the six things the plan includes. The header is two lines, so the button sits high on the page. Built with Frame, Badge, Shine Button, Guides and Lucide icons, with CSS transitions only. It is a server component with no client state. For newsletters, indie products, launch offers and any plan that needs no explaining.
FAQ
How do I change the plan?
Edit the PLAN constant at the top of the file: its name, the launch price, the regular price it replaces, the features, the cta label, the href and a line of terms under the button. CURRENCY is the symbol. The "Save 44%" badge is worked out from the two prices, so it always matches them. For a plan with no launch discount, delete the struck price and the badge.
How do I connect the call to action to checkout?
The call to action is a real link to PLAN.href; point it at your sign-up or checkout.
The link is the a that ShineButton's asChild renders: change its href, or put your router's link there.
How is the struck price read by a screen reader?
The old price is a real <s> element with hidden "Was" before it, and the new price has hidden "now" before it and "per month" after it, so the sequence reads "Was $9, now $5 per month" while the visible "/month" is hidden from assistive technology to avoid saying it twice. Both prices are isolated with dir="ltr", so the currency symbol stays beside its number in right-to-left layouts.
How does the card stand out without colour?
By structure. The Frame is a tinted shell, the price panel is a raised bg-card surface with a faint shadow, and the feature list sits on the shell beside it. The only colour is the call to action's primary button. Everything else uses the foreground and muted tokens, so it works in any theme, light or dark.
How does it adapt to a phone?
Below md the card stacks: name, price and button first, then the six features in one column, so the button is reached well inside the first screen and there is nothing to collapse. From md the two parts sit side by side, the panel taking five twelfths. The features fade in one after another with a CSS transition that is switched off under reduced motion.