# Stack
Stacks are foundational layout components designed to arrange child elements sequentially (either vertically or horizontally). While they behave similarly to standard Jetpack Compose `Column` and `Row` components, Stacks automatically enforce consistent, theme-based spacing between each child item to ensure your UI looks uniform and adheres to your design system guidelines.
You can use Stacks for:
* Grouping related elements together with consistent gaps (e.g., a title, subtitle, and paragraph).
* Building toolbars or action rows where buttons need standard spacing.
* Creating forms where input fields are stacked uniformly.
When not to use Stacks:
* For overlapping elements (use a standard `Box` instead).
* For very long, scrollable lists of hundreds of items (use `LazyColumn` or `LazyRow` to preserve memory).
***
## Vertical Stack
The `VerticalStack` arranges its children from top to bottom. It is essentially a `Column` that applies an automatic gap (`spacing`) between each child.
### Basic Example
```kotlin
VerticalStack(
spacing = KoreTheme.sizes.md, // Custom spacing override
horizontalAlignment = Alignment.Start
) {
Text("User Profile", style = KoreTheme.typography.headin3)
Text("Manage your account settings below.", color = Color.Gray)
PrimaryButton(onClick = { /* ... */ }) {
Text("Edit Profile")
}
}
```
### Parameters
| Parameter | Type | Default | Description |
| --------------------- | ------------------------------------ | ------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| `modifier` | `Modifier` | `Modifier` | Applied to the root container of the layout. |
| `spacing` | `Dp` | `KoreTheme.sizes.xs` | The vertical gap applied exactly between each child element. |
| `verticalAlignment` | `Alignment.Vertical` | `StackDefaults.defaultVerticalAlignment` | Aligns the entire block of stacked children vertically if the stack is taller than its contents. |
| `horizontalAlignment` | `Alignment.Horizontal` | `StackDefaults.defaultHorizontalAlignment` | Aligns individual children along the horizontal (cross) axis. |
| `content` | `@Composable ColumnScope.() -> Unit` | — | The elements to display vertically. |
***
## Horizontal Stack
The `HorizontalStack` arranges its children from left to right. It is essentially a `Row` that applies an automatic gap (`spacing`) between each child.
### Basic Example
```kotlin
HorizontalStack(
modifier = Modifier.fillMaxWidth(),
spacing = KoreTheme.sizes.sm,
horizontalAlignment = Alignment.CenterHorizontally // Centers the group of buttons
) {
GhostButton(onClick = { /* ... */ }) { Text("Cancel") }
PrimaryButton(onClick = { /* ... */ }) { Text("Save Changes") }
}
```
### Parameters
| Parameter | Type | Default | Description |
| --------------------- | --------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| `modifier` | `Modifier` | `Modifier` | Applied to the root container of the layout. |
| `spacing` | `Dp` | `KoreTheme.sizes.xs` | The horizontal gap applied exactly between each child element. |
| `horizontalAlignment` | `Alignment.Horizontal` | `StackDefaults.defaultHorizontalAlignment` | Aligns the entire block of stacked children horizontally if the stack is wider than its contents. |
| `verticalAlignment` | `Alignment.Vertical` | `StackDefaults.defaultVerticalAlignment` | Aligns individual children vertically along the cross axis. |
| `content` | `@Composable RowScope.() -> Unit` | — | The elements to display horizontally. |
***
## Customization & Layout Behavior
Because these components expose the `verticalAlignment` and `horizontalAlignment` parameters used in `Arrangement.spacedBy`, you can easily control how the stack behaves when given a strict size.
### Centered Form Box
If you give a `VerticalStack` a specific height, you can center its children perfectly while maintaining the gap between them:
```kotlin
VerticalStack(
modifier = Modifier
.fillMaxWidth()
.height(300.dp)
.background(KoreTheme.colorScheme.surface),
verticalAlignment = Alignment.CenterVertically, // Centers the cluster of items
spacing = 16.dp
) {
Icon(imageVector = PhIcons.Bold.LockKey, contentDescription = null)
Text("Please log in to continue")
TextField(value = "", onValueChange = {})
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://kore-1.gitbook.io/kore/documentation/foundation/stack.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.