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%",
)