Enables the creation of customizable staggered grid layouts, arranging items in columns with automatic content height detection, scrolling support, and configuration options for gaps and padding.
A Kotlin Multiplatform Compose library that provides a waterfall (staggered grid) layout component for Compose applications.
Waterfall Layout Compose is a Kotlin Multiplatform library that provides a Waterfall composable function for creating staggered grid layouts (also known as waterfall layouts or Pinterest-style layouts) in Compose applications. Very simple to use; This layout automatically detect content height and arranges items in columns.
The library supports multiple platforms including Android, iOS, and JVM, making it perfect for cross-platform applications built with Compose Multiplatform.
Copyright 2025 Stefanus Ayudha and Contributors
Add the dependency to your module's build.gradle.kts:
dependencies {
implementation("io.github.stefanusayudha:waterfall:1.1.0")
}
Add the dependency to your module's build.gradle:
dependencies {
implementation 'io.github.stefanusayudha:waterfall:1.1.0'
}
Artifact: Maven Central
Add the dependency to your pom.xml:
<dependency>
<groupId>io.github.stefanusayudha</groupId>
<artifactId>waterfall</artifactId>
<version>1.1.0</version>
</dependency>
Layout will automatically detect content height and arrange them, no configuration needed.
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
androidx.compose.material3.Card
androidx.compose.material3.Text
androidx.compose.runtime.Composable
androidx.compose.ui.Modifier
androidx.compose.ui.unit.dp
{
items = listOf(, , , , )
Waterfall(
modifier = Modifier.fillMaxSize(),
items = items,
rowCount =
) { item ->
Card(
modifier = Modifier.padding(dp)
) {
Text(
text = item,
modifier = Modifier.padding(dp)
)
}
}
}
@Composable
fun <T> Waterfall(
modifier: Modifier = Modifier,
items: List<T> = emptyList(),
scrollState: ScrollState = rememberScrollState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
verticalGap: Dp = 0.dp,
horizontalGap: Dp = 0.dp,
rowCount: Int = 2,
content: @Composable (T) -> Unit = {}
)
New Api is added for more customize-ability.
@Composable
fun <T> Waterfall(
modifier: Modifier = Modifier,
items: List<T> = emptyList(),
scrollState: ScrollState = rememberScrollState(),
contentPadding: (panelWidth: Dp, rowCount: Int) -> PaddingValues = { _, _ -> PaddingValues(0.dp) },
verticalGap: (panelWidth: Dp, rowCount: ) -> Dp = { _, _ -> dp },
horizontalGap: (panelWidth: Dp, rowCount: ) -> Dp = { _, _ -> dp },
minWidth: (panelWidth: Dp) -> Dp = { dp },
content: (T) -> = {}
)
| Platform | Support Status |
|---|---|
| Android |
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
Modifier - Modifier to be applied to the waterfall layoutList<T> - List of items to display in the waterfall layoutScrollState - State object for controlling and observing scroll behaviorPaddingValues - Padding around the entire contentDp - Vertical spacing between items in the same columnDp - Horizontal spacing between columnsInt - Number of columns in the waterfall layout@Composable (T) -> Unit - Composable function to render each item| ✅ Supported |
| iOS | ✅ Supported |
| JVM | ✅ Supported |
| Linux | 🚧 Planned |
| WasmJS | 🚧 Planned |
Surfaced from shared tags and platforms — no rankings paid for.