Product Quick View
Commerce
Source and install need .
pnpm dlx shadcn@latest add @assembli/size-guideSize Guide
A size guide dialog for product pages. Tops, Bottoms and Shoes tabs, a cm/in switch, and a measurement table whose hovered or focused cell lights its row and column like a crosshair. A flat drawing numbers each measurement and lights the one in use. Find my size takes height and chest (or your usual size) plus a preferred fit, and recommends a size with a match score.
Props
Other props pass through to the root element.
charts
SizeChart[]
Default
DEFAULT_SIZE_CHARTSdefaultChart
string
defaultUnit
SizeUnit
Default
"cm"selectedSize
string
The size chosen on the product, marked in the table.
onSelectSize
(size: string, chart: SizeChart) => void
Shows a "Select M" button under the fit finder's recommendation.
productName
React.ReactNode
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
container
HTMLElement | React.RefObject<HTMLElement | null> | null
Mount inside this element instead of
<body>.trigger
React.ReactNode | null
Trigger content; pass
nullto render no trigger and controlopenyourself.triggerClassName
string
className
string
| Description | |||
|---|---|---|---|
| charts | SizeChart[] | DEFAULT_SIZE_CHARTS | |
| defaultChart | string | – | |
| defaultUnit | SizeUnit | "cm" | |
| selectedSize | string | – | The size chosen on the product, marked in the table. |
| onSelectSize | (size: string, chart: SizeChart) => void | – | Shows a "Select M" button under the fit finder's recommendation. |
| productName | React.ReactNode | – | |
| open | boolean | – | |
| defaultOpen | boolean | – | |
| onOpenChange | (open: boolean) => void | – | |
| container | HTMLElement | React.RefObject<HTMLElement | null> | null | – | Mount inside this element instead of |
| trigger | React.ReactNode | null | – | Trigger content; pass |
| triggerClassName | string | – | |
| className | string | – |
