---
title: Stack
description: A flexible Compose layout composable that arranges its children either horizontally or vertically, providing a unified API that abstracts over Row and Column layouts.
---

<div id="references">

| Parameter | Description |
|-----------|-------------|
| `modifier` | Modifier to be applied to the Stack |
| `orientation` | Controls whether children are laid out horizontally or vertically. Defaults to `StackOrientation.Horizontal` |
| `mainAxisArrangement` | Controls the arrangement of children along the main axis (horizontal for horizontal orientation, vertical for vertical orientation). Defaults to `MainAxisArrangement.Start` |
| `crossAxisAlignment` | Controls the alignment of children on the cross axis (vertical for horizontal orientation, horizontal for vertical orientation). Defaults to `CrossAxisAlignment.Start` |
| `spacing` | Space between children. Ignored when using `SpaceEvenly`, `SpaceBetween`, or `SpaceAround` arrangements. Defaults to `0.dp` |
| `content` | The composable content to be laid out within the Stack |

</div>

## Code Examples

### Basic Example

Use `Stack` to arrange its children horizontally by default:

```compose id="stack-basic" height=200
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
import com.composeunstyled.Text

COMPOSE {
    Stack(spacing = 12.dp) {
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("0", color = Color.White)
        }
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("1", color = Color.White)
        }
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("2", color = Color.White)
        }
    }
}
```

```kotlin
import com.composeunstyled.Stack
```

```kotlin
Stack {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}
```

### Orientation

Use `orientation` with the desired `StackOrientation` to arrange children vertically or horizontally:

```compose id="stack-vertical" height=200
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
import com.composeunstyled.Text

COMPOSE {
    Stack(
        orientation = StackOrientation.Vertical,
        spacing = 12.dp
    ) {
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("0", color = Color.White)
        }
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("1", color = Color.White)
        }
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("2", color = Color.White)
        }
    }
}
```

```kotlin
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
```

```kotlin
Stack(orientation = StackOrientation.Vertical) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}
```

### Main Axis Arrangement

Use `mainAxisArrangement` to control how children are distributed along the main axis.

```compose id="stack-main-axis" height=100
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.composeunstyled.MainAxisArrangement
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
import com.composeunstyled.Text

COMPOSE {
    Stack(
        orientation = StackOrientation.Horizontal,
        mainAxisArrangement = MainAxisArrangement.SpaceBetween,
        modifier = Modifier.fillMaxWidth(0.5f)
    ) {
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("0", color = Color.White)
        }
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("1", color = Color.White)
        }
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("2", color = Color.White)
        }
    }
}
```

```kotlin
import com.composeunstyled.MainAxisArrangement
import com.composeunstyled.Stack
```

```kotlin
Stack(mainAxisArrangement = MainAxisArrangement.SpaceBetween) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}
```

### Cross Axis Alignment

Use `crossAxisAlignment` to align children on the perpendicular axis.

```compose id="stack-cross-axis" height=150
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.composeunstyled.CrossAxisAlignment
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
import com.composeunstyled.Text

COMPOSE {
    Stack(
        orientation = StackOrientation.Horizontal,
        crossAxisAlignment = CrossAxisAlignment.Center,
        spacing = 12.dp
    ) {
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("0", color = Color.White)
        }
        Box(
            modifier = Modifier.width(48.dp).height(80.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("1", color = Color.White)
        }
        Box(
            modifier = Modifier.width(48.dp).height(64.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("2", color = Color.White)
        }
    }
}
```

```kotlin
import com.composeunstyled.CrossAxisAlignment
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
```

```kotlin
Stack(
    orientation = StackOrientation.Horizontal,
    crossAxisAlignment = CrossAxisAlignment.Center,
) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}
```

### Spacing

Use `spacing` to control the amount of spacing between children.

```compose id="stack-spacing" height=100
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.composeunstyled.Stack
import com.composeunstyled.Text

COMPOSE {
    Stack(spacing = 48.dp) {
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("0", color = Color.White)
        }
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("1", color = Color.White)
        }
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("2", color = Color.White)
        }
    }
}
```

```kotlin
import com.composeunstyled.Stack
```

```kotlin
Stack(spacing = 48.dp) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}
```

### Weights

Use `Modifier.weight()` on any children within the `StackScope` to control its size relative to other children in the Stack.

```compose id="stack-weights" height=100
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
import com.composeunstyled.Text

COMPOSE {
    Stack(
        orientation = StackOrientation.Horizontal,
        spacing = 12.dp,
        modifier = Modifier.width(500.dp)
    ) {
        Box(
            modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("1f", color = Color.White)
        }
        Box(
            modifier = Modifier.weight(1f).height(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("1f", color = Color.White)
        }
        Box(
            modifier = Modifier.weight(2f).height(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Text("2f", color = Color.White)
        }
    }
}
```

```kotlin
import com.composeunstyled.Stack
```

```kotlin
Stack {
    Box(Modifier.size(48.dp)) {
        Text("1f")
    }
    Box(Modifier.weight(1f)/*...*/) {
        Text("1f")
    }
    Box(Modifier.weight(2f)/*...*/) {
        Text("2f")
    }
}
```

### Responsive design

Use `orientation` to dynamically change how the `Stack` lays out its children based on screen size.

To get context about the screen size, use [`currentWindowContainerSize()`](currentWindowContainerSize):

```compose id="stack-responsive" height=300
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.composables.icons.lucide.AlignHorizontalDistributeCenter
import com.composables.icons.lucide.AlignVerticalDistributeCenter
import com.composables.icons.lucide.Lucide
import com.composeunstyled.Button
import com.composeunstyled.Icon
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
import com.composeunstyled.Text
import com.composeunstyled.outline

COMPOSE {
    var isHorizontal by remember { mutableStateOf(true) }

    Stack(
        orientation = StackOrientation.Vertical,
        spacing = 16.dp,
        crossAxisAlignment = com.composeunstyled.CrossAxisAlignment.Center
    ) {
        Box(
            modifier = Modifier
                .width(300.dp)
                .border(1.dp, Color(0xFFE5E7EB), RoundedCornerShape(100))
                .background(Color(0xFFF3F4F6), RoundedCornerShape(100))
                .padding(start = 4.dp)
                .padding(8.dp)
        ) {
            Stack(
                orientation = StackOrientation.Horizontal,
                mainAxisArrangement = com.composeunstyled.MainAxisArrangement.SpaceBetween,
                crossAxisAlignment = com.composeunstyled.CrossAxisAlignment.Center,
                modifier = Modifier.width(300.dp - 16.dp)
            ) {
                Text("Orientation")

                Stack(
                    orientation = StackOrientation.Horizontal,
                    spacing = 4.dp
                ) {
                    Button(
                        onClick = { isHorizontal = true },
                        backgroundColor = if (isHorizontal) Color.White else Color.Transparent,
                        shape = RoundedCornerShape(50),
                        contentPadding = androidx.compose.foundation.layout.PaddingValues(8.dp),
                        modifier = Modifier
                            .size(40.dp)
                            .then(
                                if (isHorizontal) {
                                    Modifier.outline(
                                        width = 1.dp,
                                        color = Color(0xFFD1D5DB),
                                        shape = RoundedCornerShape(50)
                                    )
                                } else {
                                    Modifier
                                }
                            )
                    ) {
                        Icon(
                            imageVector = Lucide.AlignHorizontalDistributeCenter,
                            contentDescription = "Horizontal orientation",
                            modifier = Modifier.size(24.dp),
                            tint = if (isHorizontal) Color.Black else Color(0xFF6B7280)
                        )
                    }

                    Button(
                        onClick = { isHorizontal = false },
                        backgroundColor = if (!isHorizontal) Color.White else Color.Transparent,
                        shape = RoundedCornerShape(50),
                        contentPadding = androidx.compose.foundation.layout.PaddingValues(8.dp),
                        modifier = Modifier
                            .size(40.dp)
                            .then(
                                if (!isHorizontal) {
                                    Modifier.outline(
                                        width = 1.dp,
                                        color = Color(0xFFD1D5DB),
                                        shape = RoundedCornerShape(50)
                                    )
                                } else {
                                    Modifier
                                }
                            )
                    ) {
                        Icon(
                            imageVector = Lucide.AlignVerticalDistributeCenter,
                            contentDescription = "Vertical orientation",
                            modifier = Modifier.size(24.dp),
                            tint = if (!isHorizontal) Color.Black else Color(0xFF6B7280)
                        )
                    }
                }
            }
        }

        Box(
            modifier = Modifier.width(200.dp).height(200.dp),
            contentAlignment = Alignment.Center
        ) {
            Stack(
                orientation = if (isHorizontal) {
                    StackOrientation.Horizontal
                } else {
                    StackOrientation.Vertical
                },
                spacing = 12.dp
            ) {
                Box(
                    modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
                    contentAlignment = Alignment.Center
                ) {
                    Text("0", color = Color.White)
                }
                Box(
                    modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
                    contentAlignment = Alignment.Center
                ) {
                    Text("1", color = Color.White)
                }
                Box(
                    modifier = Modifier.size(48.dp).background(Color(0xFF3B82F6), RoundedCornerShape(4.dp)),
                    contentAlignment = Alignment.Center
                ) {
                    Text("2", color = Color.White)
                }
            }
        }
    }
}
```

```kotlin
import com.composeunstyled.Stack
import com.composeunstyled.StackOrientation
import com.composeunstyled.currentWindowContainerSize
```

```kotlin
val containerSize = currentWindowContainerSize()
val orientation = if (containerSize.width >= 600.dp) {
    StackOrientation.Horizontal
} else {
    StackOrientation.Vertical
}

Stack(
    orientation = orientation,
    spacing = 16.dp
) {
    Box(/*...*/) {
        Text("0")
    }
    Box(/*...*/) {
        Text("1")
    }
    Box(/*...*/) {
        Text("2")
    }
}
```