Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Chakra

/

Layout

/

Stack

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

Example

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

Example

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