shadcn.io is not affiliated with official shadcn/ui
Price Savings CTA Block for Solid
A card-in-card bundle call to action: the three products as pills and two bars, what they cost bought separately at full width and a shorter bundle bar with the gap labelled You save, then a Shine Button.
Installation
Overview
Show a bundle's saving instead of only claiming it, in this call to action for Solid with Ark UI. The block sits on the page's spine: two side rails at the page column and one top rule with a + mark on each crossing, so it joins the blocks above and below it. Under the rule sits a card in a card: a raised panel inside a tinted shell with + marks on its corners. The headline says what you keep ("Get all three and keep $11"), the three Larkspur products are listed as outline pills with their prices, and two horizontal bars show what they cost bought one by one, drawn at full width, and the bundle's price as a shorter bar in the theme's foreground tone, with the gap between them boxed and labelled "You save". The bars' lengths are worked out from the prices, so the picture is always to scale. One Shine Button takes the visitor to the bundle. It's built from Badge and Shine Button, with CSS transitions for the entrance. The whole block follows the theme, light or dark. For software suites, course bundles, add-on packs and any offer where buying together is the better deal.
FAQ
How do I change the products and the bundle price?
Edit PRODUCTS (a name and a price each) and BUNDLE_PRICE at the top of the file. The full bar's total, the saving in the headline, the percentage in the intro and the length of the bundle bar are all worked out from those, so changing a price updates every figure and the drawing. Keep the bundle price below the total, or the "You save" box has nothing to show.
How are the bar lengths worked out?
The bundle bar's share of the full bar is the bundle price over the separate total in whole percent, rounded down ($29 of $40 is 72%), written once as a CSS variable on the row. The "You save" box takes whatever is left, so the two always fill the row exactly. The saving's percentage uses the same arithmetic ($11 of $40 is 27%), so it can't drift from the figures.
Is the comparison readable without seeing the bars?
Yes. Every bar carries its own text: "Bought separately $40", "Bundle $29" and "You save $11" are real text in reading order, and the pills are a named list of the three products with their prices. The bars add the sense of scale, not information the text lacks.
How does it fit a 320 px screen?
The card keeps its shell and padding, the bars shrink with it, and the "You save" box stacks its label over the amount so it stays readable when it is only a few dozen pixels wide. The pills wrap onto a second line. Amounts keep a left-to-right direction in a right-to-left page so the currency sign stays beside the figures.