Rect

The <Rect /> element is used to create a rectangle and variations of a rectangle shape.

import { Svg, Rect } from '@react-pdf/renderer';

const Swatches = () => (
  <Svg viewBox="0 0 120 60" width={240} height={120}>
    <Rect x="8" y="14" width="32" height="32" rx="4" fill="#e82200" />
    <Rect x="44" y="14" width="32" height="32" rx="4" fill="#8d1602" />
    <Rect x="80" y="14" width="32" height="32" rx="4" fill="#c9c2b6" />
  </Svg>
);

Show preview

Valid props

Prop name	Description	Type	Default
x	The x coordinate of the rect.	String, Number	undefined
y	The y coordinate of the rect.	String, Number	undefined
width	The width of the rect.	String, Number	undefined
height	The height of the rect.	String, Number	undefined
rx	The horizontal corner radius of the rect.	String, Number	undefined
ry	The vertical corner radius of the rect.	String, Number	undefined

Valid props

On this page