---
title: Scrollbars
description: Vertical and horizontal scrollbars for scroll states and lazy layouts.
---

Use scrollbars when content containers need clearer scroll affordances.

<UiDemo id="scrollbars-vertical" />

## 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/Scrollbars.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Horizontal

<UiDemo id="scrollbars-horizontal" />

### LazyColumn

<UiDemo id="scrollbars-lazy-column" />

### Always visible

<UiDemo id="scrollbars-always-visible" />

### Disabled

<UiDemo id="scrollbars-vertical-disabled" />

### Horizontal disabled

<UiDemo id="scrollbars-horizontal-disabled" />

## API Reference

### rememberVerticalScrollbarState (1)

Creates and remembers scrollbar state for a scrollable container.

```kotlin
@Composable
fun rememberVerticalScrollbarState(scrollState: ScrollState): ScrollbarState
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `scrollState` | `ScrollState` | ScrollState used to drive the scrollbar. |

### rememberVerticalScrollbarState (2)

Creates and remembers scrollbar state for a scrollable container.

```kotlin
@Composable
fun rememberVerticalScrollbarState(lazyListState: LazyListState): ScrollbarState
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `lazyListState` | `LazyListState` | LazyListState used to drive the scrollbar. |

### rememberVerticalScrollbarState (3)

Creates and remembers scrollbar state for a scrollable container.

```kotlin
@Composable
fun rememberVerticalScrollbarState(lazyGridState: LazyGridState): ScrollbarState
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `lazyGridState` | `LazyGridState` | LazyGridState used to drive the scrollbar. |

### VerticalScrollbar

A vertical scrollbar tied to a ScrollbarState.

```kotlin
@Composable
fun VerticalScrollbar(
    state: ScrollbarState,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    reverseLayout: Boolean = false,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    thumbColor: Color = Theme[colors][mutedColor],
    thumbShape: Shape = RoundedCornerShape(999.dp),
    autoHide: Boolean = true,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `state` | `ScrollbarState` | Scrollbar state used by the scrollbar component. |
| `modifier` | `Modifier` | Modifier applied to the scrollbar. |
| `enabled` | `Boolean` | Whether the scrollbar can be interacted with. |
| `reverseLayout` | `Boolean` | Whether the underlying layout scroll direction is reversed. |
| `interactionSource` | `MutableInteractionSource` | Interaction source used for dragging and hover state. |
| `thumbColor` | `Color` | Color used for the scrollbar thumb. |
| `thumbShape` | `Shape` | Shape used for the scrollbar thumb. |
| `autoHide` | `Boolean` | Whether the scrollbar thumb fades out while idle. |

### HorizontalScrollbar

A horizontal scrollbar tied to a ScrollbarState.

```kotlin
@Composable
fun HorizontalScrollbar(
    state: ScrollbarState,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    reverseLayout: Boolean = false,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    thumbColor: Color = Theme[colors][mutedColor],
    thumbShape: Shape = RoundedCornerShape(999.dp),
    autoHide: Boolean = true,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `state` | `ScrollbarState` | Scrollbar state used by the scrollbar component. |
| `modifier` | `Modifier` | Modifier applied to the scrollbar. |
| `enabled` | `Boolean` | Whether the scrollbar can be interacted with. |
| `reverseLayout` | `Boolean` | Whether the underlying layout scroll direction is reversed. |
| `interactionSource` | `MutableInteractionSource` | Interaction source used for dragging and hover state. |
| `thumbColor` | `Color` | Color used for the scrollbar thumb. |
| `thumbShape` | `Shape` | Shape used for the scrollbar thumb. |
| `autoHide` | `Boolean` | Whether the scrollbar thumb fades out while idle. |