Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Layout

/

Stack

Stack is a layout component used to group elements together and apply a space between them.

vstack is used to stack elements in the vertical direction.

hstack is used to stack elements in the horizontal direction.

stack is used to stack elements in the vertical or horizontal direction.

These components are based on the flex component and therefore inherit all of its props.

The stack component can be used with the flex_direction prop to set to either row or column to set the direction.

Example
Example
Example
Example
Example
Example
rx.flex(
    rx.stack(
        rx.box(
            "Example",
            bg="orange",
            border_radius="3px",
            width="20%",
        ),
        rx.box(
            "Example",
            bg="lightblue",
            border_radius="3px",
            width="30%",
        ),
        rx.box(
            "Example",
            bg="lightgreen",
            border_radius="3px",
            width="50%",
        ),
        flex_direction="row",
        width="100%",
    ),
    rx.stack(
        rx.box(
            "Example",
            bg="orange",
            border_radius="3px",
            width="20%",
        ),
        rx.box(
            "Example",
            bg="lightblue",
            border_radius="3px",
            width="30%",
        ),
        rx.box(
            "Example",
            bg="lightgreen",
            border_radius="3px",
            width="50%",
        ),
        flex_direction="column",
        width="100%",
    ),
    width="100%",
)
Example
Example
Example
Example
Example
rx.hstack(
    rx.box(
        "Example",
        bg="red",
        border_radius="3px",
        width="10%",
    ),
    rx.box(
        "Example",
        bg="orange",
        border_radius="3px",
        width="10%",
    ),
    rx.box(
        "Example",
        bg="yellow",
        border_radius="3px",
        width="10%",
    ),
    rx.box(
        "Example",
        bg="lightblue",
        border_radius="3px",
        width="10%",
    ),
    rx.box(
        "Example",
        bg="lightgreen",
        border_radius="3px",
        width="60%",
    ),
    width="100%",
)
Example
Example
Example
Example
Example
rx.vstack(
    rx.box(
        "Example",
        bg="red",
        border_radius="3px",
        width="20%",
    ),
    rx.box(
        "Example",
        bg="orange",
        border_radius="3px",
        width="40%",
    ),
    rx.box(
        "Example",
        bg="yellow",
        border_radius="3px",
        width="60%",
    ),
    rx.box(
        "Example",
        bg="lightblue",
        border_radius="3px",
        width="80%",
    ),
    rx.box(
        "Example",
        bg="lightgreen",
        border_radius="3px",
        width="100%",
    ),
    width="100%",
)

Saving Money

Saving money is an art that combines discipline, strategic planning, and the wisdom to foresee future needs and emergencies. It begins with the simple act of setting aside a portion of one's income, creating a buffer that can grow over time through interest or investments.

Spending Money

Spending money is a balancing act between fulfilling immediate desires and maintaining long-term financial health. It's about making choices, sometimes indulging in the pleasures of the moment, and at other times, prioritizing essential expenses.

rx.hstack(
    rx.box(
        rx.heading("Saving Money"),
        rx.text(
            "Saving money is an art that combines discipline, strategic planning, and the wisdom to foresee future needs and emergencies. It begins with the simple act of setting aside a portion of one's income, creating a buffer that can grow over time through interest or investments.",
            margin_top="0.5em",
        ),
        padding="1em",
        border_width="1px",
    ),
    rx.box(
        rx.heading("Spending Money"),
        rx.text(
            "Spending money is a balancing act between fulfilling immediate desires and maintaining long-term financial health. It's about making choices, sometimes indulging in the pleasures of the moment, and at other times, prioritizing essential expenses.",
            margin_top="0.5em",
        ),
        padding="1em",
        border_width="1px",
    ),
    gap="2em",
)

A stack component.

Test
PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

directionLiteral

How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"

alignLiteral

Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"

justifyLiteral

Alignment of children along the cross axis: "start" | "center" | "end" | "between"

wrapLiteral

Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"

spacingLiteral

Gap between children: "0" - "9"

Event Triggers

No component specific event triggers

A horizontal stack component.

Test
PropTypeDescriptionValues
directionLiteral

The direction of the stack.

as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

directionLiteral

How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"

alignLiteral

Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"

justifyLiteral

Alignment of children along the cross axis: "start" | "center" | "end" | "between"

wrapLiteral

Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"

spacingLiteral

Gap between children: "0" - "9"

Event Triggers

No component specific event triggers

A vertical stack component.

Test
PropTypeDescriptionValues
directionLiteral

The direction of the stack.

as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

directionLiteral

How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"

alignLiteral

Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"

justifyLiteral

Alignment of children along the cross axis: "start" | "center" | "end" | "between"

wrapLiteral

Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"

spacingLiteral

Gap between children: "0" - "9"

Event Triggers

No component specific event triggers

← SpacerAudio →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting