Skip to content

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

Pro

Variants Product Card Block for Vue

Three waxed-cotton jackets with four named grey finishes and four sizes each, where the choice works out the SKU, the stock and the price, and a sold-out size says which one it is.

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 choose before they add with this variants product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three jackets between shared hairlines. Each tile has a drawn greyscale picture, a Badge, four finish swatches, four size chips and an outline Button. A finish is a named grey step (Graphite, Slate, Stone, Fog) and the jacket re-tones with it. Picking a size works out the SKU, whether it is in stock and the price, in integer cents; XL costs $8 more. A combination that is sold out stays pickable so the status line can say which one, as in "Sold out in Fog, M". Add reads "Choose a size" until one is picked, then "Add to bag", and turns into "Added" with an Undo. On a phone the tiles are a row you swipe, with the next one showing. For clothing, shoes and any product with colour and size.

FAQ

How do I change the jackets, finishes and sizes?

Edit JACKETS, FINISHES and SIZES. A jacket has a base price in cents (14800 is $148) and a code that goes into the SKU. A size has an extra in cents. Sold-out and low-stock combinations are the typed lists OUT and LOW, keyed jacket|finish|size.

Why can I pick a size that is sold out?

So the page can say why. A struck-through size that was disabled would just look broken. Here the chip stays pickable, the status line says "Sold out in Fog, M. Try another size or finish.", and Add reads "Sold out" with aria-disabled, so it stays focusable and explains itself when pressed.

Where do the price and the SKU come from?

From small pure helpers (priceOf, skuOf, stockOf) over the typed rows, so the line under the chips, the price, the Add label and the status line always agree. Money is integer cents and formatted once.

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

The finish, the size and the bag are page state; nothing is stored, reserved or charged. Replace add and undo with calls to your cart, and read OUT and LOW from your inventory. The pictures are typed shapes: swap Picture for an img of each finish.

How does it look on a phone?

The tiles become a row you swipe sideways, each about three quarters of the width so the next one shows. The row is a focusable region, so a keyboard user can scroll it with the arrow keys.

Is it accessible?

The finish and size controls are native radio groups with a visible legend, so arrow keys, focus and names come from the browser. A sold-out size is marked in words, not only with a line through it, and each picture is a named image that includes the finish.

All 100 product cards blocks