Layout Primitives - Rect, Circle, Line and Shape

Layout primitivesLayout primitives

Most of a design isn't the chart or the headline. It's the panel behind them, the rule that separates two sections, the dot that marks a step. Four component types cover that work.

Rect circle and lineRect, circle and line

rect is the workhorse: cards, panels, badges, accent bars. It takes fillColor, borderRadius, borderWidth, borderColor and boxShadow, which is enough for most surface treatments without reaching for an image.

circle covers dots, avatar frames and rings. Give it a fillColor for a solid, or leave the fill off and set borderColor with a borderWidth for a ring. An explicit radius overrides the size box when you want a perfect circle inside a rectangular slot.

line is a single rule. Use it for dividers and underlines rather than a 1px rect, because the intent reads clearly in the Layers panel later.

Shape for everything elseShape, for everything else

shape renders any SVG path. Give it path and a viewBox and it draws that geometry with fillColor, strokeColor and strokeWidth.

POST https://render.imejis.io/v1/<design-id>
{
  "badge": {
    "path": "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z",
    "viewBox": "0 0 24 24",
    "fillColor": "#6366F1"
  }
}

Stars, arrows, chevrons, logos, anything you can express as a path. preserveAspectRatio controls how it fits its box when the ratio doesn't match.

Why these are separate typesWhy these are separate types

You could draw a rectangle with shape and a path. Don't. A rect is one property to change; a path is a string nobody wants to edit by hand six months later. Reach for shape when the geometry genuinely isn't a rectangle, a circle or a line.

Try itTry it

All four are in the Shapes section of the editor palette, with live playgrounds on the rect, circle, line and shape component pages.