---
title: Separators
description: Horizontal and vertical separators with caller-defined color and thickness.
---



```kotlin expandable title="SeparatorsDemo.kt" githubUrl="https://github.com/composablehorizons/compose-unstyled/blob/main/demo/src/commonMain/kotlin/com/composeunstyled/demo/separators/SeparatorsDemo.kt"
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.composeunstyled.Text
import com.composeunstyled.UnstyledHorizontalSeparator
import com.composeunstyled.UnstyledVerticalSeparator
import com.composeunstyled.demo.borderToken
import com.composeunstyled.demo.colors
import com.composeunstyled.demo.inputBackgroundToken
import com.composeunstyled.demo.surfaceToken
import com.composeunstyled.theme.Theme

@Preview
@Composable
fun SeparatorsDemo() {
  BoxWithConstraints(
    modifier = Modifier
      .fillMaxSize(),
    contentAlignment = Alignment.Center,
  ) {
    Column(
      Modifier
        .clip(RectangleShape)
        .background(Theme[colors][surfaceToken])
        .border(1.dp, Theme[colors][borderToken], RectangleShape)
        .width(240.dp),
    ) {
      Text(
        "New Window",
        modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
      )
      UnstyledHorizontalSeparator(Theme[colors][inputBackgroundToken])
      Text("New Tab", Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp))
      UnstyledHorizontalSeparator(Theme[colors][inputBackgroundToken])
      Text(
        "New Incognito Tab",
        Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
      )
      UnstyledHorizontalSeparator(Theme[colors][inputBackgroundToken])
      Row(Modifier.fillMaxWidth().height(IntrinsicSize.Min)) {
        Text(
          "Copy",
          modifier = Modifier.padding(8.dp).weight(1f),
          textAlign = TextAlign.Center,
        )
        UnstyledVerticalSeparator(Theme[colors][inputBackgroundToken])
        Text(
          "Cut",
          modifier = Modifier.padding(8.dp).weight(1f),
          textAlign = TextAlign.Center,
        )
        UnstyledVerticalSeparator(Theme[colors][inputBackgroundToken])
        Text(
          "Paste",
          Modifier.padding(8.dp).weight(1f),
          textAlign = TextAlign.Center,
        )
      }
    }
  }
}
```



## Installation

```kotlin
implementation("com.composables:composeunstyled-separators:2.10.0")
```

## Anatomy

```kotlin
UnstyledHorizontalSeparator(color = Color.Black)

UnstyledVerticalSeparator(color = Color.Black)
```

## Concepts

- `UnstyledHorizontalSeparator` renders a horizontal line.
- `UnstyledVerticalSeparator` renders a vertical line.

## Code Examples

### Changing separator thickness

Use the `thickness` parameter to change the line thickness:

```kotlin expandable
UnstyledHorizontalSeparator(
  color = Color.Black,
  thickness = 2.dp,
)
```

## API Reference

### UnstyledHorizontalSeparator

| Parameter | Type | Description |
|-----------|------|-------------|
| `color` | `Color` | the `Color` of the separator. |
| `modifier` | `Modifier` | the `Modifier` to be used to this separator. |
| `thickness` | `Dp` | a `Dp` of how thick the separator should rendered. |
### UnstyledVerticalSeparator

| Parameter | Type | Description |
|-----------|------|-------------|
| `color` | `Color` | the `Color` of the separator. |
| `modifier` | `Modifier` | the `Modifier` to be used to this separator. |
| `thickness` | `Dp` | a `Dp` of how thick the separator should rendered. |