---
title: "Scrollbar Utility"
description: "Discord-styled scrollbars for any scrollable container, with an optional keyboard-focusable viewport."
---

Discord-styled scrollbars for any scrollable container, with an optional keyboard-focusable viewport. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Scrollbar Utility — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add scrollbar
```

Files written — React: components/ui/scrollbar.tsx. Vue: components/ui/scrollbar/ScrollArea.vue, components/ui/scrollbar/index.ts.

## Usage

React:

```tsx
import { Scrollbar } from "@/components/ui/scrollbar"
```

Vue:

```ts
import { ScrollArea } from "@/components/ui/scrollbar"
```

## API reference

**`ScrollArea`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `focusable` | `boolean \| undefined` | — | Put the viewport in the tab order so it can be scrolled from the keyboard (WCAG 2.1.1). Off by default: a focusable region only helps when the area actually scrolls and holds no other focusable content. |
| `viewportLabel` | `string \| undefined` | — | Accessible name of the focusable viewport. |

The registry exports `ScrollArea`, `Scrollbar`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

Scrollbar Utility reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.