> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Shape

> Adds a Shape panel in the Makeswift builder to visually edit an `object`.

Adds a Shape panel in the Makeswift builder to visually edit an `object`.

![](/_fern-img/48cb59b450aa98b4ee0ad27440a65b45266495c0c7dbf04de5c7632c44772fe0.webp)

The Shape control can be nested as deeply as you want within Shape and List controls.

## Params

**`type`** `{ [key: string]: Control }` — required

An object of controls in which the type and values returned from each control
determines the shape of the overall value passed to your component. May
consist of any of the Makeswift controls.

---

## Prop type

The Shape control passes an `object` based on the controls used in the `type` field. The keys of the object are the keys of the controls in the `type` field, and the values are based on the corresponding control's prop type.

## Example

This example adds a Shape control to the `type` field of a [List](/developer/docs/reference/controls/list) control for a Feature Grid component.

**`FeatureGrid.makeswift.ts`**

```tsx FeatureGrid.makeswift.ts
import {
  List,
  Shape,
  TextInput,
  TextArea,
  Image,
} from "@makeswift/runtime/controls"

import { runtime } from "@/makeswift/runtime"

import { FeatureGrid } from "./FeatureGrid"

runtime.registerComponent(FeatureGrid, {
  type: "feature-grid",
  label: "Feature Grid",
  props: {
    features: List({
      label: "Features",
      type: Shape({
        type: {
          icon: Image({ label: "Icon" }),
          iconAltText: TextInput({
            label: "Icon alt text",
            defaultValue: "icon",
          }),
          heading: TextArea({
            label: "Heading",
            defaultValue: "This is a heading",
          }),
          description: TextArea({
            label: "Description",
            defaultValue: "This is a description.",
          }),
        },
      }),
    }),
  },
})
```

**`FeatureGrid.tsx`**

```tsx FeatureGrid.tsx
interface Props {
  features: {
    icon: string
    iconAltText: string
    heading: string
    description: string
  }[]
}

export function FeatureGrid({ features }: Props) {
  return (
    <div className="grid grid-cols-2 gap-4">
      {features.map((feature, index) => (
        <div className="col-span-1 grid gap-2" key={index}>
          <img src={feature.icon} alt={feature.iconAltText} />
          <h3>{feature.heading}</h3>
          <p>{feature.description}</p>
        </div>
      ))}
    </div>
  )
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).