Skip to main content
The Rect component defines rectangular geometry within a Shape. It supports rounded corners and must always be a child of a Shape component.

​
Props

​
x
number
required
X-coordinate of the rectangle’s top-left corner in pixels.
​
y
number
required
Y-coordinate of the rectangle’s top-left corner in pixels.
​
width
number
required
Width of the rectangle in pixels.
​
height
number
required
Height of the rectangle in pixels.
​
rx
number
Horizontal corner radius for rounded rectangles in pixels.Use with ry to create elliptical corners, or alone for circular corners.
​
ry
number
Vertical corner radius for rounded rectangles in pixels.Use with rx to create elliptical corners.

​
Usage

​
Basic Rectangle

import { Shape, Rect } from 'react-thorvg-fiber';

<Shape fill={[255, 0, 0, 255]}>
  <Rect x={50} y={50} width={100} height={100} />
</Shape>

​
Rounded Rectangle

import { Shape, Rect } from 'react-thorvg-fiber';

<Shape fill={[0, 128, 255, 255]}>
  <Rect x={20} y={20} width={150} height={100} rx={10} ry={10} />
</Shape>

​
Elliptical Corners

import { Shape, Rect } from 'react-thorvg-fiber';

<Shape fill={[255, 200, 0, 255]}>
  <Rect x={0} y={0} width={200} height={80} rx={30} ry={10} />
</Shape>

​
Multiple Rectangles in One Shape

import { Shape, Rect } from 'react-thorvg-fiber';

<Shape fill={[100, 100, 255, 255]}>
  <Rect x={10} y={10} width={50} height={50} />
  <Rect x={70} y={10} width={50} height={50} />
  <Rect x={10} y={70} width={50} height={50} />
</Shape>

​
Rectangle with Stroke

import { Shape, Rect } from 'react-thorvg-fiber';

<Shape
  fill={[255, 255, 255, 255]}
  stroke={[0, 0, 0, 255]}
  strokeWidth={2}
>
  <Rect x={30} y={30} width={140} height={90} rx={5} />
</Shape>

​
Parent-Child Relationships

  • Parent: Must be a child of Shape
  • Children: Rect does not accept children
A Rect component that is not a child of a Shape will not render.
The position (x, y) is relative to the parent Shape’s transform. If the Shape has x={100}, a Rect with x={50} will be rendered at pixel position 150.

​
TypeScript Interface

interface RectProps {
  x: number;
  y: number;
  width: number;
  height: number;
  rx?: number;
  ry?: number;
}
Source: packages/fiber/src/types.ts:137-167

Build docs developers (and LLMs) love

Get started for freeTalk to us