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

Width60Height50Border Radius8

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.