Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Benefits Product Card Block for Vue

An espresso machine told as measured differences: pick a benefit and two bars compare it with a typical machine, with the gap in words, a warranty popover and an Add to bag with Undo.

UI library: Ark UI

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Back a product's claims with numbers using this benefits product card for Vue with Ark UI. A hairline frame with a plus mark on each corner is split into three bands. The first has the drawn greyscale espresso machine beside its name, read-only Rating stars, the price, a "2-year warranty" button that opens its terms in a Popover, stock in words and an outline Button that says "Add to bag". The second is a three-cell Toggle Group: "Heats in 30 s", "Self-cleans" and "Five brews". The pressed cell fills the third band with two bars for the same measure, the Brew One against a typical machine, and the difference in words, such as "4 times faster". The figures are typed and labelled as such. Add turns into "Added" with an Undo, the heading row's "Bag" count follows and a polite status line says what changed. Nothing is stored or bought. Guides rule the bands. For product pages where each benefit can be measured.

FAQ

How do I change the benefits?

Edit BENEFITS. Each has a title for the cell, the measure it compares, the product's figure (ours), the same measure on a typical machine (typical), a unit and whether a bigger number is better (higherIsBetter). The bars are drawn against the larger of the two figures, and "4 times faster" is worked out from them, so the picture and the words always agree.

Are the numbers real?

No. They are typed for the demo and the card says so under the bars. For a real product, use figures you can back up and name the test or the comparison in that line.

How does the warranty button work?

It is a button that opens a popover with the terms, so it works by hover-free press, by keyboard and on touch. Escape closes it and focus returns to the button. The terms are typed text; replace them with your own.

What stays local, and how do I wire it for real?

The chosen benefit and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart and keep the status line for the result. The ship date is typed (SHIPS). The picture is typed shapes: swap the figure for an img of the product.

How does it look on a phone?

The bands stack: picture, details and Add first, then the three cells in a row, each wrapping its words, then the bars. The bars keep their order and the gap line holds two lines of height, so choosing a benefit never moves the page.

Is it accessible?

The picture is a named image. The cells are a named group of toggle buttons that work with the arrow keys. The bars are decorative: each has its figure written beside it, and the gap is in words. The choice and the Add result are announced by the polite status line.

All 100 product cards blocks