Size Guide Table
A measurement chart mapping XS-XXL to chest, waist, hip, and length dimensions in inches, with a cm-conversion note. Drops into a product page's sizing tab or modal.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/size-guide-table.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce9.tsx instead.
Usage
The file also exports ecommerce9Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Ecommerce9, ecommerce9Demo } from "@/components/blocks/ecommerce/ecommerce9"; export default function Page() { return <Ecommerce9 {...ecommerce9Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Size guide" | Heading above the table. |
| note | string | none | Small note below the table, e.g. the cm-conversion tip. |
| rows | SizeRow[] | [] | Size rows, one per table row, in display order. |
| className | string | none | Extra classes for the outer section element. |
Types
type SizeRow = { size: string; chest: string; waist: string; hips: string; length: string; };
Behavior notes
- A hand-written native <table>, not a UI-kit primitive; every measurement field is a plain string so ranges like "38-40" render as-is.
- The table sits inside an overflow-x-auto wrapper so the 5-column layout scrolls horizontally on narrow screens instead of squeezing columns unreadably.
- Fully static: there is no sorting, unit toggle, or highlighting of a "your size" row.
More Ecommerce Blocks
View all →wishlist-manager
Wishlist Manager
Saved-items list with stock-status badges, move-to-cart and remove actions, and a real empty state.
product-information-tabs
Product Information Tabs
Tabbed product details with Description, Features, Specifications, Reviews, and Shipping panels.
collection-showcase-grid
Collection Showcase Grid
A large featured-collection hero card alongside a grid of smaller supporting collection tiles.
shop-by-brand-grid
Shop by Brand Grid
A grid of bordered brand tiles with a wordmark-style name, product count, and a hover affordance.
sale-countdown-timer
Sale Countdown Timer
A live days/hours/minutes/seconds countdown in default, compact, or full-width banner layouts.
gift-card-redemption-form
Gift Card Redemption Form
A code-entry form that validates against a fixed list of demo gift cards and shows a real success or error state.