shadcn.io is not affiliated with official shadcn/ui
Money Back Hero Pricing Block for Vue
One plan sold on its guarantee: an oversized 30-day seal, its promise written round the edge, beside the plan's price, features and call to action.
Installation
Overview
Take the risk out of buying with this money-back guarantee pricing section. The hero is a seal: "30 days" at the centre of two thin rings, with "30-day money-back guarantee, full refund, no questions asked" written round the edge, 320 px across on a wide screen. Under it, the promise's terms in a sentence. Beside it, the one plan of a language-learning app: Premium at $12.99 a month, the block's one primary Shine Button and eight features, which collapse to five behind an "All 8 features" button on a phone. The seal is plain SVG with a path and text on it, so it takes the theme's foreground colour and stays sharp at any size. The section sits on the page's lines, drawn by Guides: side rails, a rule along its top, and the band ruled with a + at each corner. Built with Button, Shine Button, Guides and Lucide icons, with CSS transitions only. For subscriptions, courses and premium plans where buyers hesitate before paying.
FAQ
How do I change the guarantee, the plan and the features?
Edit the constants at the top of the file. GUARANTEE_DAYS is the number in the seal's centre, written round its edge, in the headline, the terms under the seal and the footnote, so change it once. PLAN holds the name, description, monthly price and the button's text; FEATURES is the list. The words round the seal are one string in the SVG's textPath; keep them short, since the text is stretched to fill the ring exactly.
What should I check before I publish the guarantee?
That the page says exactly what your refund policy says: the window ("30 days"), what is refunded ("every cent"), how fast ("3 to 5 business days") and how to ask ("email us"). Keep the seal, the headline, the sentence under the seal and the footnote in step, and link the full terms from your footer or checkout. "No questions asked" is a promise to keep: only write it if your support team does.
How is the seal drawn, and can I change it?
It's an inline SVG: three circles and a text on a circular path, with the number and "days" in HTML on top, centred. The ring text uses textLength so it fills the circle whatever the words, and the SVG is currentColor, so it follows light and dark themes and every preset. To change the look, change the radii (OUTER, INNER, TEXT_RADIUS) at the top of the file. On first paint it turns in from a slight tilt and fades up, and under reduced motion it's drawn still.
Where does the call to action go?
"Start learning risk-free" is a real link. It's a ShineButton whose asChild renders the link. Point it at your checkout. It's the only primary element in the block.
Is the seal accessible?
It's decorative: the SVG and the number sit in a hidden group, because the headline ("Learn for 30 days, or your money back"), its sentence and the terms under the seal say the same in real text. The plan is a heading with its price read as "$12.99 per month", and the show-more button states aria-expanded. Keyboard focus reaches only the call to action and the button.
How does it look on a phone?
The headline comes first, then the seal at 208 px with its terms, then the plan, so the button sits within the first two screens. Below md only the first five features show, with an "All 8 features" button; from md all eight show. From lg the seal and the plan sit side by side, the seal centred in its half.