Size Guide Table

Component 6

About

A measurement chart table showing size, chest, waist, hips, and length columns for clothing product pages and sizing reference.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Size Guide Table to your project and fits it to your theme.

Code

How Size Guide Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Ecommerce11 } from "@/components/ui/ecommerce11";

const sizes = [
  { size: "XS", chest: "32-34", waist: "26-28", hips: "34-36", length: "26" },
  { size: "S", chest: "34-36", waist: "28-30", hips: "36-38", length: "27" },
  { size: "M", chest: "38-40", waist: "32-34", hips: "40-42", length: "28" },
  { size: "L", chest: "42-44", waist: "36-38", hips: "44-46", length: "29" },
  { size: "XL", chest: "46-48", waist: "40-42", hips: "48-50", length: "30" },
];

export default function DemoPage() {
  return (
    <Ecommerce11
      heading="Size Guide"
      description="Measurements are in inches. For the best fit, measure yourself and compare with the chart below."
      unit="in"
      sizes={sizes}
    />
  );
}