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.
Event Triggers
See the full list of default event triggersDid you find this useful?
No
Yes
