shadcn.io is not affiliated with official shadcn/ui
Size Guide Storefront Block for Radix UI
A size guide for a shirt shop in three tabs: enter chest and waist in cm or in with a fit preference to get a size, read the size chart with your row marked, and see how to measure.
Installation
Overview
Help a shopper pick a size without guessing, with this size guide for React with Radix UI. A header says what Tuck & Tassel, a shirt and tailoring shop, offers and holds a Segment Group that switches the whole guide between cm and in. In a hairline frame with a plus mark on each corner, three Tabs hold Find my size, Size chart and How to measure. Find my size has a chest and a waist Input and a Slim, Regular or Relaxed fit switch, and names a size beside them; a body that falls between two sizes is settled by the fit (Between M and L: M for regular) and one that fits a single size says so. Size chart is a native table of six sizes with the recommended row marked by a word, not a colour. How to measure draws the chest, the waist and the sleeve on a shirt. The ranges are typed in centimetres and converted for inches, and the numbers you typed convert when you change the unit. It's built from Segment Group, Tabs, Input, Badge and Guides, with a CSS entrance only. For a product page, a fit help page or any shop that sells sized clothes.
FAQ
How do I use my own sizes?
Edit SIZES: each has an id, a chest range and a waist range in centimetres and a sleeve length. Keep the ranges in order. The chart, the finder and the inch values all come from them, so there is nothing else to change.
What happens when I sit between two sizes?
The chest and the waist are placed on their own ranges. If they land on different sizes, or in the gap between two ranges, the answer is the pair, and the fit decides: Slim takes the smaller, Relaxed the larger and Regular follows the chest. If both land on one size, that is the answer in every cut.
What happens to what I typed when I change the unit?
It is converted, not cleared: 96 cm becomes 37.8 in, and back again. Values are rounded to one decimal, and the size is always worked out in centimetres, so the answer is the same in either unit.
What stays local, and how do I wire it to real data?
Everything. The sizes are a sample and nothing is sent or saved. To use it for real, replace SIZES with your size table; to follow the answer into a cart, read the size from the verdict and select it in your variant picker.
How does it look on a phone?
The two measurement fields stay side by side, the fit switch spans the width, the chart keeps four columns and scrolls inside its frame if it must, and the three drawings stack as rows. The tabs scroll sideways and every tab keeps the same height, so the panel does not jump.
Is it accessible?
The tabs are a named tab list, each field has a visible label that names its unit, the fit switch is a named radio group, the marked row says Your size in words and the status line is a polite live region present from the start. The drawings are decorative; the text under each describes the measure.