Box
Box is a generic container component that can be used to group other components.
By default, the Box component is based on the div
and rendered as a block element. It's primary use is for applying styles.
Basic Example
CSS color
CSS color
Radix Color
Radix Color
Radix Theme Color
rx.box(
rx.box(
"CSS color",
background_color="yellow",
border_radius="2px",
width="20%",
margin="4px",
padding="4px",
),
rx.box(
"CSS color",
background_color="orange",
border_radius="5px",
width="40%",
margin="8px",
padding="8px",
),
rx.box(
"Radix Color",
background_color="var(--tomato-3)",
border_radius="5px",
width="60%",
margin="12px",
padding="12px",
),
rx.box(
"Radix Color",
background_color="var(--plum-3)",
border_radius="10px",
width="80%",
margin="16px",
padding="16px",
),
rx.box(
"Radix Theme Color",
background_color="var(--accent-2)",
radius="full",
width="100%",
margin="24px",
padding="25px",
),
flex_grow="1",
text_align="center",
)
Background
To set a background image or
gradient,
use the background
CSS prop.
rx.flex(
rx.box(
background="linear-gradient(45deg, var(--tomato-9), var(--plum-9))",
width="20%",
height="100%",
),
rx.box(
background="linear-gradient(red, yellow, blue, orange)",
width="20%",
height="100%",
),
rx.box(
background="radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%)",
width="20%",
height="100%",
),
rx.box(
background="center/cover url('/reflex_banner.png')",
width="20%",
height="100%",
),
spacing="2",
width="100%",
height="10vh",
)
API Reference
rx.box
A fundamental layout building block, based on div
element.
Props
No component specific props