---
title: "curvedBox"
description: "A layout composable that places its children on top of each other and on an arc. This is similar
to a [Box] layout, but curved into a segment of an annulus.

The thickness of the layout (the difference between the outer and inner radius) will be the same
as the thickest child, and the angle taken will be the biggest angle of the children."
type: "function"
---

<div class='type'>Function</div>


<a id='references'></a>
<div class='sourceset sourceset-android'>Android</div>


```kotlin
public fun CurvedScope.curvedBox(
    modifier: CurvedModifier = CurvedModifier,
    radialAlignment: CurvedAlignment.Radial? = null,
    angularAlignment: CurvedAlignment.Angular? = null,
    contentBuilder: CurvedScope.() -> Unit,
): Unit
```


A layout composable that places its children on top of each other and on an arc. This is similar
to a `Box` layout, but curved into a segment of an annulus.

The thickness of the layout (the difference between the outer and inner radius) will be the same
as the thickest child, and the angle taken will be the biggest angle of the children.

#### Parameters

| | |
| --- | --- |
| modifier | The `CurvedModifier` to apply to this curved row. |
| radialAlignment | Radial alignment specifies where to lay down children that are thinner than the CurvedBox, either closer to the center `CurvedAlignment.Radial.Inner`, apart from the center `CurvedAlignment.Radial.Outer` or in the middle point `CurvedAlignment.Radial.Center`. If unspecified, they can choose for themselves. |
| angularAlignment | Angular alignment specifies where to lay down children that are thinner than the CurvedBox, either at the `CurvedAlignment.Angular.Start` of the layout, at the `CurvedAlignment.Angular.End`, or `CurvedAlignment.Angular.Center`. If unspecified or null, they can choose for themselves. |
| contentBuilder | Specifies the content of this layout, currently there are 5 available elements defined in foundation for this DSL: the sub-layouts `curvedBox`, `curvedRow` and `curvedColumn`, `basicCurvedText` and `curvedComposable` (used to add normal composables to curved layouts) |




## Code Examples
### CurvedBoxSample
```kotlin
@Composable
fun CurvedBoxSample() {
    CurvedLayout(modifier = Modifier.fillMaxSize()) {
        curvedBox(
            modifier = CurvedModifier.background(Color.Red),
            radialAlignment = CurvedAlignment.Radial.Inner,
            angularAlignment = CurvedAlignment.Angular.End,
        ) {
            curvedComposable {
                Box(modifier = Modifier.width(40.dp).height(80.dp).background(Color.Green))
            }
            curvedComposable {
                Box(modifier = Modifier.size(30.dp).clip(CircleShape).background(Color.White))
            }
        }
    }
}
```