# `PhiaUi.Components.Layout.Stack`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/stack.ex#L1)

Vertical or horizontal flex stack with consistent gap.

`stack` is the workhorse layout component for most page regions. Use
`:vertical` (default) for stacked sections and `:horizontal` for inline
groups of elements.

All layout attributes accept either a plain value (backward compatible) or a
responsive map like `%{base: :vertical, md: :horizontal}` for per-breakpoint
control.

## Examples

    <%!-- Vertical stack (VStack equivalent) --%>
    <.stack gap={4}>
      <.card>First</.card>
      <.card>Second</.card>
      <.card>Third</.card>
    </.stack>

    <%!-- Horizontal stack (HStack equivalent) --%>
    <.stack direction={:horizontal} gap={2} align={:center}>
      <.icon name="hero-bell" />
      <span>Notifications</span>
      <.badge>3</.badge>
    </.stack>

    <%!-- Responsive: stack vertically on mobile, horizontal from md --%>
    <.stack direction={%{base: :vertical, md: :horizontal}} gap={%{base: 2, md: 4}}>
      <.card>A</.card>
      <.card>B</.card>
    </.stack>

    <%!-- Centered vertical stack --%>
    <.stack gap={6} align={:center} class="py-12">
      <h1>Title</h1>
      <p>Subtitle</p>
      <.button>Get started</.button>
    </.stack>

# `stack`

Renders a flex stack container.
## Attributes

* `direction` (`:any`) - Stack direction. Accepts atom or responsive map, e.g. `%{base: :vertical, md: :horizontal}`. Defaults to `:vertical`.
* `gap` (`:any`) - Gap between children (0–12) → `gap-N`. Accepts integer or responsive map. Defaults to `4`.
* `align` (`:any`) - align-items value. Accepts atom or responsive map. Defaults to `nil`.
* `justify` (`:any`) - justify-content value. Accepts atom or responsive map. Defaults to `nil`.
* `wrap` (`:boolean`) - Allow children to wrap onto multiple lines. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Stack children.

---

*Consult [api-reference.md](api-reference.md) for complete listing*