Skip to content

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

Pro

Art Print Product Card Block for Vue

A numbered giclee print hung on a drawn wall above an 84 in sofa, where the size, frame finish and paper change the print against the sofa and work out the price, SKU and ship time.

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

Let shoppers see a print on a wall before they buy it with this art print product card for Vue with Ark UI. A wall is drawn at the start of a framed panel with a sofa to scale, 84 inches wide, and the print above it. A Toggle Group chooses 12 by 16, 18 by 24 or 24 by 36 inches and the print grows against the sofa; five frame finishes (None, Black, White, Oak, Walnut, as grey steps) thicken the border; three papers (flat, fine weave, canvas) change the print's surface. The price is the size plus the frame plus the paper, in integer cents, and the SKU and the ship time follow. The one primary is a Shine Button, "Add to bag, $84". "No. 42 of 250" is typed. On a phone the wall comes first. Nothing is stored or bought.

FAQ

How do I change the sizes and prices?

Edit SIZES, PRINT_CENTS, FRAMES and PAPERS. Frames and papers hold one price per size, in the order of SIZES, in cents. The total is totalOf, and the SKU is skuOf.

Is the drawing to scale?

Yes: one drawing unit is one inch. The sofa is 84 units wide and 34 high, the print is its real width and height, and it hangs 8 inches above the back. Change BACK_TOP and GAP for a different room.

Why does a Walnut frame at 24 by 36 take three weeks?

A typed rule in madeToOrder: that combination is made to order and ships in 3 weeks; everything else ships in 5 days. Replace it with a check against your framer.

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

The choices and the bag are page state; nothing is stored or charged. Replace add and undo with calls to your cart. The artwork is drawn from SVG shapes: swap the group inside Wall for an image of the real print.

How does it look on a phone?

The wall is first, then the choices, the price list and the Add stack under it. The wall keeps its proportions, so the print stays to scale.

Is it accessible?

The wall is a named image that says the size, the frame and the paper, with a caption below it. The size and paper are labelled toggle groups, the frame is a native radio group with a legend, and the status line announces the new price after each change.

All 100 product cards blocks