Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Layout

/

Box

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

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

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

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

Box can also compose videos and iframe elements.

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

A generic container component that can contain other components.

PropTypeDescriptionValues
elementstr

The type element to render. You can specify an image, video, or any other HTML element such as iframe.

srcstr

The source of the content.

altstr

The alt text of the content.

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting