Library
/
Chakra
/
Layout
/
Center
Center, Square, and Circle are components that center its children within itself.
Hello World!
rx.chakra.center(
rx.chakra.text("Hello World!"),
border_radius="15px",
border_width="thick",
width="50%",
)Below are examples of circle and square.
Square
Circle
rx.chakra.hstack(
rx.chakra.square(
rx.chakra.vstack(rx.chakra.text("Square")),
border_width="thick",
border_color="purple",
padding="1em",
),
rx.chakra.circle(
rx.chakra.vstack(rx.chakra.text("Circle")),
border_width="thick",
border_color="orange",
padding="1em",
),
spacing="2em",
)A box that centers its contents.
Props
No component specific props
Event Triggers
See the full list of default event triggersA square container with round border-radius.
Props
No component specific props
Event Triggers
See the full list of default event triggersA centered square container.
Props
No component specific props
Event Triggers
See the full list of default event triggersDid you find this useful?
No
Yes
