> 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.

# Style

> Add a Style control to your component in the Makeswift builder to visually edit a CSS class `string` prop.

Add a Style control to your component in the Makeswift builder to visually edit a CSS class `string` prop.

![](/_fern-img/372b544c39ff3954c6e8829e91c2376d0d56b5538bf5ac4a813b34a402996d35.webp)

The Style control is the only control that is responsive; its values can be changed at different viewport sizes without affecting the others. For example, you could set a width of 1200px in desktop and 100% in mobile.

## Params

**`properties`** `StyleProperty[] | Style.All | Style.Default` — default: Style.Default

An array of style properties that can be visually edited. These values include:

* `Style.Width`
* `Style.Margin`
* `Style.Padding`
* `Style.Border`
* `Style.BorderRadius`
* `Style.TextStyle`

The following presets are also available:

* `Style.Default` which is equivalent to `[Style.Width, Style.Margin]`
* `Style.All` which includes all properties.

---

## Example

The following example adds a Style control to the `className` prop of an Image component.

**`Image.makeswift.ts`**

```tsx Image.makeswift.ts
import { Style } from "@makeswift/runtime/controls"

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

import { Image } from "./Image"

runtime.registerComponent(Image, {
  type: "image",
  label: "Image",
  props: {
    className: Style({ properties: Style.All }),
  },
})
```

**`Image.tsx`**

```tsx Image.tsx
interface Props {
  className?: string
}

export function Image({ className }: Props) {
  return <img className={className} src="https://via.placeholder.com/150" />
}
```

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