Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

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

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting