> 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", as_="h2"),
        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", as_="h2"),
        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/