Container

The <Container> component is a lightweight wrapper around a Roblox ImageLabel that makes it easy to size and position your interface using simple, CSS-inspired props.

Use a <Container> whenever you need to define the size or placement of a section of your UI before adding layouts or other components inside it.

Basic usage

Features

• Set width and height using percentages or pixel values.
• Position elements using top, left, right, and bottom.
• Centre elements horizontally, vertically, or both.
• Works seamlessly with layout components such as Row, Column, HStack, and VStack.
• Optionally render a background image via the backgroundImage prop.
• Optionally render a background gradient via the backgroundGradient prop.
• Optionally add a border, padding, and rounded corners via the border*, padding, and cornerRadius props.
• Accepts all native ImageLabel properties through React.

Sizing

The width and height props accept CSS-style values.

<Container width="100%" height="100%">
    ...
</Container>

You can use either percentages or pixels.

<Container width="75%" height="400px">
    ...
</Container>

Min and max size

minWidth, maxWidth, minHeight, and maxHeight clamp the container's resolved size, like CSS min-width and max-width. A typical use is width="100%" maxWidth={1200}, which fills the parent up to a desktop width.

The minimums apply however the size was produced: Size, width/height, a percentage, or AutomaticSize. The maximums cap a size set with Size, width/height, or a percentage, but they don't stop AutomaticSize growing an axis to fit its children. A container that auto-sizes to a 120-pixel-wide child is still 120 pixels wide with maxWidth={80}. To cap an axis, give it a size, for example width="100%" maxWidth={320}.

The values are pixels only: a number, "25", or "25px" (CssPixelSize). Percentages are not accepted, because Roblox's UISizeConstraint only takes pixel sizes.

• When none of the four is set, no UISizeConstraint is added and the container renders exactly as before.
• When any is set, a single UISizeConstraint named SizeConstraint is added. An unset minimum is 0 and an unset maximum is unbounded.
• A negative minimum is treated as 0, and a maximum below its minimum is raised to the minimum.
• The constraint goes on the visible container itself. When center wraps a content-sized container in an invisible full-size frame, the wrapper isn't clamped.
• Don't also pass your own <uisizeconstraint> child when using these props. The container would end up with two, and Roblox only applies one.

These props come from the shared SizeElementProps, so every component that accepts width and height accepts them too, including Box, Card, FlexItem, FadeGroup, Scroller, Slider, ProgressBar, Modal, and Table. Components that render through Container get the constraint on the same visible element. Scroller puts it on a wrapper Frame around its ScrollingFrame instead (see Scroller sizing). Tooltip currently ignores its size props, including these.

Centering

Use the center prop to quickly centre a container.

<Container
    width="300px"
    height="200px"
    center
>
    ...
</Container>

You can also centre on a specific point.

<Container
    width="400px"
    center
>
    ...
</Container>

Positioning

Containers can be positioned relative to their parent using familiar directional props.

<Container
    top="20px"
    left="20px"
    width="250px"
>
    ...
</Container>

Or anchored to another edge.

<Container
    right="16px"
    bottom="16px"
    width="200px"
>
    ...
</Container>

Border

Set borderThickness to draw a UIStroke around the container. No border is drawn when borderThickness is unset or 0.

The border uses plain values and is not read from the theme, since Container is not themed.

Padding

padding adds a UIPadding using a CSS-style value of one to four parts, in pixels.

<Container width="300px" padding="8">
    ...
</Container>

<Container width="300px" padding="4 12">
    ...
</Container>

<Container width="300px" padding="4 8 12 16">
    ...
</Container>

Padding is pixel-only, so percentage values resolve to 0. When padding is unset, no UIPadding is added. top, left, right, and bottom are positioning props (see Positioning), not padding sides.

Corner radius

cornerRadius rounds the container's corners with a UICorner. It accepts a size (8, "8px", "50%") or a theme radius token ("sm", "md", or "lg"), which resolves to the matching value in the active theme's radius scale.

<Container
    width="200px"
    height="100px"
    BackgroundTransparency={0}
    cornerRadius="md"
>
    ...
</Container>

When cornerRadius is unset, or resolves to 0, no UICorner is added.

Where border, padding, and corners apply

The border, padding, and corners are applied to the visible container itself. When center wraps a content-sized container in an invisible full-size frame, that wrapper gets none of them.

Don't combine these props with your own <uistroke>, <uipadding>, or <uicorner> child of the same kind. The container would end up with two of that instance, and Roblox only applies one.

Example

<Container width="75%" center>
    <Box spacing="lg">
        <Text
            text="Welcome"
            variant="title"
        />

        <Text
            text="Containers make it easy to size and position your UI."
        />
    </Box>
</Container>

Common uses

A Container is commonly used to:

• create a page or screen area;
• centre dialogs or menus;
• position floating UI elements;
• define the bounds of a layout component;
• wrap sections of an interface before applying additional styling.

Unlike Box, which provides themed visual styling such as backgrounds, padding, and shadows, Container is primarily concerned with layout—controlling where content appears and how much space it occupies.