Rect

A Rect draws a rectangle defined by position (x, y) and dimensions (width, height), with optional rounded corners via borderRadius. Rects are one of the most versatile shapes in Ripl — used for backgrounds, cards, bar chart segments, progress indicators, and layout scaffolding. The borderRadius property accepts a single number for uniform rounding or a [topLeft, topRight, bottomRight, bottomLeft] array for per-corner control.

Example

WidthHeightBorder Radius

Usage

import {
    createRect,
} from '@ripl/web';

const rect = createRect({
    fill: '#3a86ff',
    x: 50,
    y: 50,
    width: 200,
    height: 120,
});

Properties

The rect's geometry is defined by x, y, width, height, and optional borderRadius.

NOTE

For the full property list, see the Rect API Reference.