reflex/docs/library/chakra/layout/stack.md

components
rx.chakra.Stack rx.chakra.Hstack rx.chakra.Vstack

Stack

import reflex as rx

Below are two examples the different types of stack components vstack and hstack for ordering items on a page.

rx.chakra.hstack(
    rx.chakra.box("Example", bg="red", border_radius="md", width="10%"),
    rx.chakra.box("Example", bg="orange", border_radius="md", width="10%"),
    rx.chakra.box("Example", bg="yellow", border_radius="md", width="10%"),
    rx.chakra.box("Example", bg="lightblue", border_radius="md", width="10%"),
    rx.chakra.box("Example", bg="lightgreen", border_radius="md", width="60%"),
    width="100%",
)

rx.chakra.vstack(
    rx.chakra.box("Example", bg="red", border_radius="md", width="20%"),
    rx.chakra.box("Example", bg="orange", border_radius="md", width="40%"),
    rx.chakra.box("Example", bg="yellow", border_radius="md", width="60%"),
    rx.chakra.box("Example", bg="lightblue", border_radius="md", width="80%"),
    rx.chakra.box("Example", bg="lightgreen", border_radius="md", width="100%"),
    width="100%",
)