# Sizing Property Settings

**URL:** <https://forums.realmacsoftware.com/t/sizing-property-settings/49379>\
**Category:** Elements API\
**Created:** [August 1, 2025, 6:21am UTC](https://forums.realmacsoftware.com/t/sizing-property-settings/49379 "2025-08-01T06:21:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 1, 2025, 6:21am UTC](https://forums.realmacsoftware.com/t/sizing-property-settings/49379/1 "2025-08-01T06:21:41Z")

</div>

Is there an example of how to correctly set up the SIZING properties for a custom component to match what is used in the core components?

It seems to need a particular set of values in addition to allowing the user to turn off the theme settings and enter their own. Seems like there should be a themeSizing property block that has the correct values. There are already ones for most of the other theme properties, but not for sizing.

There are a few other examples that would be very handy, as I feel it is incumbent on a component developer to match what is being used in the core components where possible, to avoid user confusion.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 1, 2025, 7:00am UTC](https://forums.realmacsoftware.com/t/sizing-property-settings/49379/2 "2025-08-01T07:00:22Z")

</div>

I think you are after the single select menu like this:

![CleanShot 2025-08-01 at 08.58.02@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/0/40b01cd0c5c508003dee6f4378ccd0aa1e10a597.png)

Is that correct?

If so, you can read about the [“Single Mode” option on the themeSpacing](https://docs.realmacsoftware.com/elements-docs/elements-language/bundle-structure/components/properties.json/ui-controls/theme-spacing#single-mode) control.

The following property will get you the same control as in the screenshot above:

```json
{
    "title": "Top",
    "id": "top",
    "format": "top-{{value}}",
    "themeSpacing": {
        "mode": "single",
        "default": {
            "base": {
                "value": "2"
            }
        }
    }
}

```

Hope that helps 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 1, 2025, 7:11am UTC](https://forums.realmacsoftware.com/t/sizing-property-settings/49379/3 "2025-08-01T07:11:51Z")

</div>

Ah ha! Suspected there had to be something, thanks exactly what is needed.

```auto
I’m assuming I would format the results as follows.

"format": "w-{{value}}", // for the width
"format": "h-{{value}}", // for the height

```

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 1, 2025, 7:17am UTC](https://forums.realmacsoftware.com/t/sizing-property-settings/49379/4 "2025-08-01T07:17:39Z")

</div>

That’s correct!

There is also a `size-` utility in Tailwind that will set both the width and height at the same time, in that case you could just do: `"format": "size-{{value}}"`

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [August 1, 2025, 7:32am UTC](https://forums.realmacsoftware.com/t/sizing-property-settings/49379/5 "2025-08-01T07:32:32Z")

</div>

> [@handshaper](#):
>
> `"format": "w-{{value}}", // for the width`

I can’t seem to get this to work. Nothing happens when I change the value. Is the above the correct format?

When I look at the tailwind docs for “width” the only ones that match are “w-auto” and “w-px”. None of the other classes match those shown in the drop down, instead they are things like “w-lg”, “w-xl”, etc. How do I convert the value to map to these classes. Unless I’m looking at the wrong version of Tailwind (4.1)?

This is the only approach I can get to work

```auto
w-[180px]

```