Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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

No component specific event triggers

A square container with round border-radius.

Props

No component specific props

Event Triggers

No component specific event triggers

A centered square container.

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting