Rect

The <Rect> primitive renders an SVG rectangle. It supports rounded corners, fill, stroke, and dashed outlines — useful for bounding boxes, containers, highlights, and background regions.

0.00s / 2.97s · F0

Props

Prop	Type	Default	Description
x	number	0	X coordinate of the top-left corner
y	number	0	Y coordinate of the top-left corner
width	number	0	Width of the rectangle
height	number	0	Height of the rectangle
fill	string	'none'	Fill color
stroke	string	'currentColor'	Stroke color
strokeWidth	number	1	Width of the stroke
rx	number	0	Corner radius for rounded rectangles
strokeDasharray	string	undefined	Dash pattern (e.g. "6 3")
opacity	number	1	Opacity from 0 to 1

Code Example

elements: {
  card: {
    id: 'card',
    type: 'rect',
    props: { type: 'rect', x: 50, y: 50, width: 180, height: 100, stroke: '$accent', strokeWidth: 2, fill: 'rgba(108,92,231,0.15)', rx: 8 },
  },
  outline: {
    id: 'outline',
    type: 'rect',
    props: { type: 'rect', x: 280, y: 80, width: 120, height: 120, stroke: '$secondary', strokeWidth: 2, fill: 'none' },
  },
}