> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.stack
  - rx.hstack
  - rx.vstack
Stack: |
  lambda **props: rx.stack(
      rx.card("Card 1", size="2"), rx.card("Card 2", size="2"), rx.card("Card 3", size="2"),
      width="100%",
      height="20vh",
      **props,
  )

VStack: |
  lambda **props: rx.vstack(
      rx.card("Card 1", size="2"),
      rx.card("Card 2", size="2"),
      rx.card("Card 3", size="2"),
      width="100%",
      border_radius="0.5rem",
      **props,
  )

HStack: |
  lambda **props: rx.hstack(
      rx.card("Card 1", size="2"),
      rx.card("Card 2", size="2"),
      rx.card("Card 3", size="2"),
      width="100%",
      border_radius="0.5rem",
      **props,
  )
---

```python exec
import reflex as rx
```

# 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.

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

## Hstack

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

## Vstack

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

## Real World Example

```python demo
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",
)
```

## API Reference

### rx.stack

A stack component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. |
| `auto_capitalize` | Literal["off", "none", "on", "sentences", "words", "characters"] | - | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
| `content_editable` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. |
| `context_menu` | str | - | Defines the ID of a <menu> element which will serve as the element's context menu. |
| `dir` | str | - | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
| `draggable` | bool | - | Defines whether the element can be dragged. |
| `enter_key_hint` | Literal["enter", "done", "go", "next", "previous", "search", "send"] | - | Hints what media types the media element is able to play. |
| `hidden` | bool | - | Defines whether the element is hidden. |
| `input_mode` | Literal["none", "text", "tel", "url", "email", "numeric", "decimal", "search"] | - | Defines the type of the element. |
| `item_prop` | str | - | Defines the name of the element for metadata purposes. |
| `lang` | str | - | Defines the language used in the element. |
| `role` | Literal["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"] | - | Defines the role of the element. |
| `slot` | str | - | Assigns a slot in a shadow DOM shadow tree to an element. |
| `spell_check` | bool | - | Defines whether the element may be checked for spelling errors. |
| `tab_index` | int | - | Defines the position of the current element in the tabbing order. |
| `title` | str | - | Defines a tooltip for the element. |
| `as_child` | bool | - | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| `direction` | Literal["row", "column", "row-reverse", "column-reverse"], Breakpoints[str, Literal["row", "column", "row-reverse", "column-reverse"]] | - | How child items are laid out: "row", "column", "row-reverse", "column-reverse". |
| `align` | Literal["start", "center", "end", "baseline", "stretch"], Breakpoints[str, Literal["start", "center", "end", "baseline", "stretch"]] | - | The alignment of the stack items. |
| `justify` | Literal["start", "center", "end", "between"], Breakpoints[str, Literal["start", "center", "end", "between"]] | - | Alignment of children along the cross axis: "start", "center", "end", "between". |
| `wrap` | Literal["nowrap", "wrap", "wrap-reverse"], Breakpoints[str, Literal["nowrap", "wrap", "wrap-reverse"]] | - | Whether children should wrap when they reach the end of their container: "nowrap", "wrap", "wrap-reverse". |
| `spacing` | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]] | - | The spacing between each stack item. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.hstack

A horizontal stack component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. |
| `auto_capitalize` | Literal["off", "none", "on", "sentences", "words", "characters"] | - | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
| `content_editable` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. |
| `context_menu` | str | - | Defines the ID of a <menu> element which will serve as the element's context menu. |
| `dir` | str | - | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
| `draggable` | bool | - | Defines whether the element can be dragged. |
| `enter_key_hint` | Literal["enter", "done", "go", "next", "previous", "search", "send"] | - | Hints what media types the media element is able to play. |
| `hidden` | bool | - | Defines whether the element is hidden. |
| `input_mode` | Literal["none", "text", "tel", "url", "email", "numeric", "decimal", "search"] | - | Defines the type of the element. |
| `item_prop` | str | - | Defines the name of the element for metadata purposes. |
| `lang` | str | - | Defines the language used in the element. |
| `role` | Literal["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"] | - | Defines the role of the element. |
| `slot` | str | - | Assigns a slot in a shadow DOM shadow tree to an element. |
| `spell_check` | bool | - | Defines whether the element may be checked for spelling errors. |
| `tab_index` | int | - | Defines the position of the current element in the tabbing order. |
| `title` | str | - | Defines a tooltip for the element. |
| `as_child` | bool | - | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| `direction` | Literal["row", "column", "row-reverse", "column-reverse"], Breakpoints[str, Literal["row", "column", "row-reverse", "column-reverse"]] | - | The direction of the stack. |
| `align` | Literal["start", "center", "end", "baseline", "stretch"], Breakpoints[str, Literal["start", "center", "end", "baseline", "stretch"]] | - | The alignment of the stack items. |
| `justify` | Literal["start", "center", "end", "between"], Breakpoints[str, Literal["start", "center", "end", "between"]] | - | Alignment of children along the cross axis: "start", "center", "end", "between". |
| `wrap` | Literal["nowrap", "wrap", "wrap-reverse"], Breakpoints[str, Literal["nowrap", "wrap", "wrap-reverse"]] | - | Whether children should wrap when they reach the end of their container: "nowrap", "wrap", "wrap-reverse". |
| `spacing` | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]] | - | The spacing between each stack item. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

### rx.vstack

A vertical stack component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. |
| `auto_capitalize` | Literal["off", "none", "on", "sentences", "words", "characters"] | - | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
| `content_editable` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. |
| `context_menu` | str | - | Defines the ID of a <menu> element which will serve as the element's context menu. |
| `dir` | str | - | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
| `draggable` | bool | - | Defines whether the element can be dragged. |
| `enter_key_hint` | Literal["enter", "done", "go", "next", "previous", "search", "send"] | - | Hints what media types the media element is able to play. |
| `hidden` | bool | - | Defines whether the element is hidden. |
| `input_mode` | Literal["none", "text", "tel", "url", "email", "numeric", "decimal", "search"] | - | Defines the type of the element. |
| `item_prop` | str | - | Defines the name of the element for metadata purposes. |
| `lang` | str | - | Defines the language used in the element. |
| `role` | Literal["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"] | - | Defines the role of the element. |
| `slot` | str | - | Assigns a slot in a shadow DOM shadow tree to an element. |
| `spell_check` | bool | - | Defines whether the element may be checked for spelling errors. |
| `tab_index` | int | - | Defines the position of the current element in the tabbing order. |
| `title` | str | - | Defines a tooltip for the element. |
| `as_child` | bool | - | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| `direction` | Literal["row", "column", "row-reverse", "column-reverse"], Breakpoints[str, Literal["row", "column", "row-reverse", "column-reverse"]] | - | The direction of the stack. |
| `align` | Literal["start", "center", "end", "baseline", "stretch"], Breakpoints[str, Literal["start", "center", "end", "baseline", "stretch"]] | - | The alignment of the stack items. |
| `justify` | Literal["start", "center", "end", "between"], Breakpoints[str, Literal["start", "center", "end", "between"]] | - | Alignment of children along the cross axis: "start", "center", "end", "between". |
| `wrap` | Literal["nowrap", "wrap", "wrap-reverse"], Breakpoints[str, Literal["nowrap", "wrap", "wrap-reverse"]] | - | Whether children should wrap when they reach the end of their container: "nowrap", "wrap", "wrap-reverse". |
| `spacing` | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]] | - | The spacing between each stack item. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/