---
title: "Layout Primitives - Rect, Circle, Line and Shape"
description: "The four building blocks behind every card layout. Rectangles, circles and lines for structure, plus a shape layer that renders any SVG path you hand it."
url: "https://www.imejis.io/changelogs/shape-rect-circle-components"
image: "https://www.imejis.io/og/components/shape.jpg"
published: "2026-07-27"
author: "imejis"
---

# Layout Primitives - Rect, Circle, Line and Shape

## Layout 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 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 else

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

```http
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 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 it

All four are in the Shapes section of the editor palette, with live playgrounds on the [rect](/components/rect), [circle](/components/circle), [line](/components/line) and [shape](/components/shape) component pages.