Sizing Property Settings

Elements Component Development
1

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.

2

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

CleanShot 2025-08-01 at 08.58.02@2x

Is that correct?

If so, you can read about the “Single Mode” option on the themeSpacing control.

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

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

Hope that helps :slight_smile:

3

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

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

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

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}}"

5

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

w-[180px]