Staaarter

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.

By Staaarter Team
Ecommerce
Docs
Live preview

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.json

Prefer 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

PropTypeDefaultDescription
headingstring"Size guide"Heading above the table.
notestringnoneSmall note below the table, e.g. the cm-conversion tip.
rowsSizeRow[][]Size rows, one per table row, in display order.
classNamestringnoneExtra 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.