Skip to content

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

Pro

Jewelry Product Card Block for Radix UI

A moonstone ring drawn to size in three metals, with a size select, a Find my size field that turns a width in millimetres into a ring size, and a price, SKU and ship time that follow.

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

Help shoppers get the size right with this jewelry product card for React with Radix UI. A ring is drawn at the start of a framed panel and grows with the size and re-tones with the metal: Silver, Gold fill or Platinum, as grey steps in a Toggle Group. The size is a Native Select from US 4 to 10 in half sizes. "Find my size" is a Collapsible with an Input for the inside width of a ring that fits, in millimetres: a typed chart finds the closest size, says "Size 7, 17.3 mm" and sets the select. The price, the SKU and the ship time follow the metal and the size in integer cents. The one primary is a Shine Button, "Add to bag, $180". On a phone the ring comes first. Nothing is stored or bought.

FAQ

How do I change the metals, sizes and prices?

Edit METALS and SIZES. A metal has a price in cents (for a size 8 ring) and a code for the SKU; a size has its inside width in tenths of a millimetre. Sizes above 8 add STEP cents per half size.

How does Find my size work?

The width you type is rounded to tenths of a millimetre and compared with every row of SIZES; the nearest row wins and sets the select. Outside 14.5 to 20.2 mm it says so and leaves the size alone.

Why does Platinum take three weeks from size 9?

A typed rule in madeToOrder: Platinum from size 9 is made to order and ships in 3 weeks, everything else in stock ships in 2 days. Replace it with a check against your inventory.

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

The metal, the size, the width and the bag are page state; nothing is stored or charged. Replace add and undo with calls to your cart. The ring is drawn from SVG shapes: swap Ring for an img of each metal.

How does it look on a phone?

The ring comes first, then the controls stack under it: metal, size, the finder, the facts and the Add.

Is it accessible?

Every control has a visible label, the finder opens with a disclosure button and its content is inert while closed, and the ring is a named image with a caption that states the size and its width in millimetres. A polite status line announces the new price after each change.

All 100 product cards blocks