Size Guide Modal React component
A shoe product card with a size grid and a Size guide link that opens a modal with three tabs: a selectable US/UK/EU size chart in cm or inches, a Find my size tool that recommends a size from foot length and width, and an illustrated How to measure guide. Picking a size applies it to the product.
About the Size Guide Modal component
Size Guide Modal answers the most common question on a shoe or apparel page, which size to buy, without leaving the product. A Size guide link next to the size grid opens a modal with a full conversion chart, a quick size finder and simple measuring instructions.
Shoppers can pick a row in the chart or accept the finder's recommendation, and the size is applied to the product straight away. Fewer wrong sizes means fewer returns and more confident buyers.
When to use it
Use it on product pages for shoes, clothing, rings or anything else sold in sizes that vary between brands or regions.
If a product only comes in S, M and L and fits like everything else in your store, a one-line fit note under the sizes is enough.
Installation
Add the Size Guide Modal component to your project with the shadcn CLI. It lands in components/size-guide-modal.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/size-guide-modalOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Size Guide Modal with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Size Guide Modal FAQ
- How does Find my size choose a size?
- It picks the smallest size whose foot length is at least the shopper's measurement. Wide feet go about half a size up and narrow feet can take a size that is a touch shorter. Change the recommend function if your brand has its own rules.
- Can I use it for clothing instead of shoes?
- Yes. Replace the sizes data and the column labels with your own measurements (chest, waist, length) and change the finder to use those fields. The modal, tabs and selection flow stay the same.
- What happens with sold-out sizes?
- They are struck through in the size grid, marked in the chart and cannot be selected or applied. If the finder recommends a sold-out size, it says so and disables the Use button.
- Why does the chart picker need a Select button?
- Picking a row only highlights it, so shoppers can compare rows and switch units first. Select applies the size to the product and closes the modal; the finder's Use button does the same in one step.
- Is the modal accessible?
- It is a labelled modal dialog with a focus trap, Escape to close and focus returned to the Size guide link. Tabs use the tab pattern with arrow keys, chart rows are a radiogroup with full spoken labels and the slider announces its value with the unit.
