MATERIAL DESIGN 3 EXPRESSIVE

Scroll Area

Custom scrollbar component that provides a consistent, MD3 Expressive look and feel across all browsers.

The Scroll Area component augments native scroll functionality with a minimal, pill-shaped scrollbar that follows Material Design 3 Expressive guidelines. It ensures that scrollbars look and behave identically across different operating systems and browsers.

tag-1

tag-2

tag-3

tag-4

tag-5

tag-6

tag-7

tag-8

tag-9

tag-10

tag-11

tag-12

tag-13

tag-14

tag-15

tag-16

tag-17

tag-18

tag-19

tag-20

tag-21

tag-22

tag-23

tag-24

tag-25

tag-26

tag-27

tag-28

tag-29

tag-30

tag-31

tag-32

tag-33

tag-34

tag-35

tag-36

tag-37

tag-38

tag-39

tag-40

tag-41

tag-42

tag-43

tag-44

tag-45

tag-46

tag-47

tag-48

tag-49

tag-50

Default behaviour

type="hover" (default) — scrollbar appears on hover.
Pill-shaped thumb with soft opacity.
Grows visual weight on hover / active for clarity.
Full keyboard navigation supported (Tab, ↑↓, PgUp/PgDn).

Loading demo...

Introduction

Native scrollbars often conflict with modern UI designs, appearing bulky or inconsistent across platforms. The MD3 Expressive Scroll Area solves this by providing a highly customizable, themeable scrollbar that only appears when needed. It is built on top of Radix UI's Scroll Area primitives, ensuring high performance and excellent accessibility.

Anatomy

Viewport: The visible area containing the scrollable content.
Scrollbar: The track and thumb used to navigate the content.
Thumb: The pill-shaped indicator that moves as the user scrolls.
Corner: The intersection where both horizontal and vertical scrollbars meet.

Variants

Orientations

Vertical (Default): For content that exceeds the height of its container.
Horizontal: For wide content like data tables or image galleries.
Both: Enables both vertical and horizontal scrolling with a dedicated corner element.

#	Name	Value	Type	Status	Date	Tags
1	Item 1	100	Alpha	Active	2025-01-01	tag-1
2	Item 2	127	Beta	Pending	2025-02-02	tag-2
3	Item 3	154	Gamma	Done	2025-03-03	tag-3
4	Item 4	181	Alpha	Active	2025-04-04	tag-4
5	Item 5	208	Beta	Pending	2025-05-05	tag-5
6	Item 6	235	Gamma	Done	2025-06-06	tag-6
7	Item 7	262	Alpha	Active	2025-07-07	tag-7
8	Item 8	289	Beta	Pending	2025-08-08	tag-8
9	Item 9	316	Gamma	Done	2025-09-09	tag-9
10	Item 10	343	Alpha	Active	2025-01-10	tag-10
11	Item 11	370	Beta	Pending	2025-02-11	tag-1
12	Item 12	397	Gamma	Done	2025-03-12	tag-2
13	Item 13	424	Alpha	Active	2025-04-13	tag-3
14	Item 14	451	Beta	Pending	2025-05-14	tag-4
15	Item 15	478	Gamma	Done	2025-06-15	tag-5
16	Item 16	505	Alpha	Active	2025-07-16	tag-6
17	Item 17	532	Beta	Pending	2025-08-17	tag-7
18	Item 18	559	Gamma	Done	2025-09-18	tag-8
19	Item 19	586	Alpha	Active	2025-01-19	tag-9
20	Item 20	613	Beta	Pending	2025-02-20	tag-10
21	Item 21	640	Gamma	Done	2025-03-21	tag-1
22	Item 22	667	Alpha	Active	2025-04-22	tag-2
23	Item 23	694	Beta	Pending	2025-05-23	tag-3
24	Item 24	721	Gamma	Done	2025-06-24	tag-4
25	Item 25	748	Alpha	Active	2025-07-25	tag-5
26	Item 26	775	Beta	Pending	2025-08-26	tag-6
27	Item 27	802	Gamma	Done	2025-09-27	tag-7
28	Item 28	829	Alpha	Active	2025-01-28	tag-8
29	Item 29	856	Beta	Pending	2025-02-29	tag-9
30	Item 30	883	Gamma	Done	2025-03-30	tag-10

Loading demo...

Features

Visibility Behaviors

Control when the scrollbar is displayed using the type prop:

Hover (Default): Scrollbar appears only when the mouse is over the container.
Always: Scrollbar is permanently visible.
Scroll: Appears only while scrolling and hides after a delay.
Auto: Appears when the content exceeds the container size.

type="hover"

Shows scrollbar only when the pointer enters the container.

tag-1

tag-2

tag-3

tag-4

tag-5

tag-6

tag-7

tag-8

tag-9

tag-10

tag-11

tag-12

tag-13

tag-14

tag-15

tag-16

tag-17

tag-18

tag-19

tag-20

hover (default)

type="scroll"

Shows scrollbar only while actively scrolling.

tag-1

tag-2

tag-3

tag-4

tag-5

tag-6

tag-7

tag-8

tag-9

tag-10

tag-11

tag-12

tag-13

tag-14

tag-15

tag-16

tag-17

tag-18

tag-19

tag-20

scroll

type="always"

Scrollbar is always visible — best for accessibility.

tag-1

tag-2

tag-3

tag-4

tag-5

tag-6

tag-7

tag-8

tag-9

tag-10

tag-11

tag-12

tag-13

tag-14

tag-15

tag-16

tag-17

tag-18

tag-19

tag-20

always

type="none"

Scrollbar is hidden entirely (native scrolling still works).

tag-1

tag-2

tag-3

tag-4

tag-5

tag-6

tag-7

tag-8

tag-9

tag-10

tag-11

tag-12

tag-13

tag-14

tag-15

tag-16

tag-17

tag-18

tag-19

tag-20

none

Loading demo...

Expressive Styling

The scrollbar thumb is a thin, pill-shaped element that subtly expands or highlights when interacted with, maintaining a clean and unobtrusive aesthetic.

Usage

Basic Usage

import { ScrollArea } from "@bug-on/m3-expressive";

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    <h4>Tags</h4>
    {tags.map((tag) => (
      <div key={tag} className="text-sm">
        {tag}
      </div>
    ))}
  </div>
</ScrollArea>

Best Practices

Do

Use Scroll Area for containers with a fixed height where content may overflow.
Prefer type="hover" for clean interfaces where scrollability is obvious.
Use type="always" for critical scrollable areas (like sidebars) where the user needs to see the scroll progress at all times.
Set a clear max-height or height on the Scroll Area container.

Don't

Don't use Scroll Area for the entire page body; let the browser handle top-level scrolling.
Don't use orientation="both" if only one axis is likely to overflow.
Avoid nesting multiple Scroll Areas within each other, as it can be confusing for users to navigate.

Accessibility

Roles: Correctly implements ARIA roles for scroll containers and regions.
Keyboard: Supports standard keyboard navigation (Arrow keys, Page Up/Down, Home/End).
Touch: Provides native-feeling momentum scrolling on touch devices.
Visibility: The scrollbar is a visual aid and doesn't replace native accessibility features.

API Reference

ScrollArea

Prop	Type	Default	Description
`type`	`"auto" \| "always" \| "scroll" \| "hover" \| "none"`	`"hover"`	Visibility behavior.
`orientation`	`"vertical" \| "horizontal" \| "both"`	`"vertical"`	Scroll axis.
`scrollHideDelay`	`number`	`600`	Hide delay (ms) for `type="scroll"`.
`className`	`string`	—	Custom classes.