Box is a generic container component that can be used to group other components.

Example
Example
Example
Example
Example
rc.vstack(
    rc.box(
        "Example",
        bg="yellow",
        border_radius="sm",
        width="20%",
    ),
    rc.box(
        "Example",
        bg="orange",
        border_radius="md",
        width="40%",
    ),
    rc.box(
        "Example", bg="red", border_radius="md", width="60%"
    ),
    rc.box(
        "Example",
        bg="lightblue",
        border_radius="lg",
        width="80%",
    ),
    rc.box(
        "Example",
        bg="lightgreen",
        border_radius="xl",
        width="100%",
    ),
    width="100%",
)

Below is an example of how a box component can contain other components.

rc.box(
    rc.button("Click Me"),
    bg="lightgreen",
    border_radius="15px",
    border_color="green",
    border_width="thick",
    padding=5,
)

Box can also compose videos and iframe elements.

rc.box(
    element="iframe",
    src="https://www.youtube.com/embed/9bZkp7q19f0",
    width="100%",
)

rc.Box

A generic container component that can contain other components.

PropType | ValuesDefault
element
str
src
str
alt
str

Event Triggers

See the full list of default event triggers