Logo

Midnight Owl UI

ScrollPanel

Stable v1.0.2

A themeable scrollable container with a custom-styled, draggable overlay scrollbar that stays consistent across every browser — instead of the browser's native scrollbar chrome.

Interactive Playground

Experiment with orientation, thumb size, accent color, and auto-hide behavior.

Orientation
Vertical
Thumb Size
Small
Severity
Neutral (default)
Options
1

List item 1

Supporting row content goes here.

2

List item 2

Supporting row content goes here.

3

List item 3

Supporting row content goes here.

4

List item 4

Supporting row content goes here.

5

List item 5

Supporting row content goes here.

6

List item 6

Supporting row content goes here.

7

List item 7

Supporting row content goes here.

8

List item 8

Supporting row content goes here.

9

List item 9

Supporting row content goes here.

10

List item 10

Supporting row content goes here.

11

List item 11

Supporting row content goes here.

12

List item 12

Supporting row content goes here.

13

List item 13

Supporting row content goes here.

14

List item 14

Supporting row content goes here.

15

List item 15

Supporting row content goes here.

16

List item 16

Supporting row content goes here.

17

List item 17

Supporting row content goes here.

18

List item 18

Supporting row content goes here.

19

List item 19

Supporting row content goes here.

20

List item 20

Supporting row content goes here.

Live Source Code
<ScrollPanel
  height="280"
>
  ...
</ScrollPanel>

Implementation Examples

Notification 1
Notification 2
Notification 3
Notification 4
Notification 5
Notification 6
Notification 7
Notification 8
Notification 9
Notification 10
Notification 11
Notification 12

1. Fixed-Height Feed

Pass a fixed height to cap a list — notifications, activity feeds, or comment threads — inside a card without letting it grow the page. 

<ScrollPanel height="220" class="rounded-lg border border-main bg-content">
  <div class="flex flex-col gap-2 p-3">
    <div
      v-for="n in 12"
      :key="n"
      class="rounded-md bg-surface/30 px-3 py-2 text-sm text-main"
    >
      Notification {{ n }}
    </div>
  </div>
</ScrollPanel>
VueNuxtViteTailwindTypeScriptPiniaIconifyFloating UI

2. Horizontal Chip Scroller

Set orientation="horizontal" for a filter/tag row that scrolls sideways with a thin accent-colored thumb instead of wrapping. 

<ScrollPanel
  orientation="horizontal"
  severity="primary"
  size="xs"
  class="rounded-lg border border-main bg-content"
>
  <div class="flex flex-nowrap gap-2 p-3">
    <span
      v-for="tag in ['Vue', 'Nuxt', 'Vite', 'Tailwind', 'TypeScript', 'Pinia', 'Iconify']"
      :key="tag"
      class="shrink-0 rounded-full border border-main bg-surface/50 px-3 py-1 text-xs font-medium whitespace-nowrap text-main"
    >
      {{ tag }}
    </span>
  </div>
</ScrollPanel>

API Reference

Props

Name
Type
Default
Description
height
string | number
undefined
Fixed viewport height. Numbers are treated as pixels. Falls back to filling the parent (`h-full`) when omitted.
orientation
"vertical" | "horizontal" | "both"
"vertical"
Which axes can scroll. Content that overflows a disabled axis is clipped, matching native `overflow-hidden`.
size
"xs" | "sm" | "md" | "lg" | "xl"
"sm"
Thickness of the custom scrollbar thumb.
severity
"primary" | "secondary" | "success" | "warning" | "danger" | "info"
undefined
Accent color for the thumb. Falls back to a neutral `bg-muted` fill when omitted.
autoHide
boolean
true
Fades the thumb out when idle and not hovered/dragged. Set `false` to keep it always visible.