---
title: Separators
description: Horizontal and vertical dividers for grouping adjacent content.
---

Use separators to break content into visual groups without adding extra chrome.

<UiDemo id="separators-horizontal" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/Separators.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Vertical

<UiDemo id="separators-vertical" />

## API Reference

### HorizontalSeparator

A horizontal divider line.

```kotlin
@Composable
fun HorizontalSeparator(
    modifier: Modifier = Modifier,
    color: Color = Theme[colors][borderColor],
    thickness: Dp = 1.dp,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the separator. |
| `color` | `Color` | Color used for the separator line. |
| `thickness` | `Dp` | Thickness of the separator line. |

### VerticalSeparator

A vertical divider line.

```kotlin
@Composable
fun VerticalSeparator(
    modifier: Modifier = Modifier,
    color: Color = Theme[colors][borderColor],
    thickness: Dp = 1.dp,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the separator. |
| `color` | `Color` | Color used for the separator line. |
| `thickness` | `Dp` | Thickness of the separator line. |