---
title: "VerticalDivider"
description: "A divider is a thin line that groups content in lists and layouts."
type: "component"
social_image: "/static/images/material3/divider.png"
---

<div class='type'>Composable Component</div>



A divider is a thin line that groups content in lists and layouts.

<img loading='lazy' class='hero-img' alt='Divider image' src='/static/images/material3/divider.png'>

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun VerticalDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color,
) =
    Canvas(modifier.fillMaxHeight().width(thickness)) {
        drawLine(
            color = color,
            strokeWidth = thickness.toPx(),
            start = Offset(thickness.toPx() / 2, 0f),
            end = Offset(thickness.toPx() / 2, size.height),
        )
    }
```


#### Parameters

| | |
| --- | --- |
| modifier | the `Modifier` to be applied to this divider line. |
| thickness | thickness of this divider line. Using `Dp.Hairline` will produce a single pixel divider regardless of screen density. |
| color | color of this divider line. |