---
url: "https://vueda.dev/v3/reference/theming/keys/ScrollBar.md"
title: "ScrollBar"
---

# ScrollBar

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The custom scrollbar track. It uses a 10px touch target and switches its border side and dimensions by orientation.

Vue component: [ScrollBar](/v3/reference/api/vue/ScrollBar.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ScrollBar.md#theme-key-ScrollBar-root) | callback | The custom scrollbar track. It uses a 10px touch target and switches its border side and dimensions by orientation. |
| [thumb](/v3/reference/theming/keys/ScrollBar.md#theme-key-ScrollBar-thumb) | `bg-border relative flex-1 rounded-full` | The draggable scrollbar thumb. It uses the border token as a quiet neutral fill and rounds fully inside the track. |

<a id="theme-key-ScrollBar-root"></a>

## root

> The custom scrollbar track. It uses a 10px touch target and switches its border side and dimensions by orientation.

Callback:

```javascript
({ orientation }) => ({
            class: [
                "flex touch-none p-px transition-colors select-none",
                orientation === "horizontal"
                    ? "h-2.5 flex-col border-t border-t-transparent"
                    : "h-full w-2.5 border-l border-l-transparent",
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/shell/ScrollBar.theme.js:18`

<a id="theme-key-ScrollBar-thumb"></a>

## thumb

> The draggable scrollbar thumb. It uses the border token as a quiet neutral fill and rounds fully inside the track.

Default classes:

`bg-border relative flex-1 rounded-full`

Source: `client/lib/theme/vueda-tailwind/shell/ScrollBar.theme.js:29`