---
title: "RemoteBox"
description: "A layout composable that positions its children relative to its own edges."
type: "composable"
---
## API Reference

### RemoteBox

> Source set: Android

```kotlin
@Composable
public fun RemoteBox(
    modifier: RemoteModifier = RemoteModifier,
    contentAlignment: RemoteAlignment = RemoteAlignment.TopStart,
    content: @Composable () -> Unit,
)
```

A layout composable that positions its children relative to its own edges.

`RemoteBox` allows you to wrap multiple children and position them using `contentAlignment`. In
Remote Compose, this layout is recorded as a Box command.

#### Parameters

| | |
| --- | --- |
| modifier | The modifier to be applied to this box. |
| contentAlignment | The default alignment inside the Box. |
| content | The content of the box. |

### RemoteBox

> Source set: Android

```kotlin
@Composable
public fun RemoteBox(modifier: RemoteModifier = RemoteModifier)
```

A version of [RemoteBox](/jetpack-compose/androidx.compose.remote/remote-creation-compose/composable-functions/RemoteBox/api) with no content, often used as a spacer or a background placeholder.

#### Parameters

| | |
| --- | --- |
| modifier | The modifier to be applied to this box. |

## Code Examples

### RemoteBoxSample

```kotlin
@Sampled
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
@Composable
fun RemoteBoxSample() {
    RemoteBox(
        modifier = RemoteModifier.size(200.rdp).background(Color.LightGray.rc),
        contentAlignment = RemoteAlignment.Center,
    ) {
        RemoteBox(modifier = RemoteModifier.size(100.rdp).background(Color.Blue.rc))
        RemoteText(text = "Centered".rs, color = Color.White.rc)
    }
}
```

### RemoteBoxStackingSample

```kotlin
@Sampled
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
@Composable
fun RemoteBoxStackingSample() {
    // Outer box centered
    RemoteBox(
        modifier = RemoteModifier.size(200.rdp).background(Color.LightGray.rc),
        contentAlignment = RemoteAlignment.Center,
    ) {
        // Red box (150dp) also centered in outer box
        // It aligns its own children to TopStart
        RemoteBox(
            modifier = RemoteModifier.size(150.rdp).background(Color.Red.rc),
            contentAlignment = RemoteAlignment.TopStart,
        ) {
            RemoteBox(modifier = RemoteModifier.size(50.rdp).background(Color.Yellow.rc))

            // Nested depth to show stacking within aligned container
            RemoteBox(
                modifier = RemoteModifier.size(30.rdp).background(Color.Black.rc),
                contentAlignment = RemoteAlignment.Center,
            ) {
                RemoteBox(modifier = RemoteModifier.size(10.rdp).background(Color.White.rc))
            }
        }

        // Green box (100dp) centered in outer box (overlaps Red)
        // It aligns its own children to BottomEnd
        RemoteBox(
            modifier = RemoteModifier.size(100.rdp).background(Color.Green.rc),
            contentAlignment = RemoteAlignment.BottomEnd,
        ) {
            RemoteBox(modifier = RemoteModifier.size(40.rdp).background(Color.Magenta.rc))
        }

        // Blue box (50dp) centered in outer box (overlaps Green)
        // It aligns its own children to Center
        RemoteBox(
            modifier = RemoteModifier.size(50.rdp).background(Color.Blue.rc),
            contentAlignment = RemoteAlignment.Center,
        ) {
            RemoteBox(modifier = RemoteModifier.size(20.rdp).background(Color.Cyan.rc))
        }
    }
}
```