Scroll Area

Scrollable container with styled scrollbar. Provides overflow control and custom scrollbar styling.

Default

Line 1 of scrollable content

Line 2 of scrollable content

Line 3 of scrollable content

Line 4 of scrollable content

Line 5 of scrollable content

Line 6 of scrollable content

Line 7 of scrollable content

Line 8 of scrollable content

Line 9 of scrollable content

Line 10 of scrollable content

Line 11 of scrollable content

Line 12 of scrollable content

Line 13 of scrollable content

Line 14 of scrollable content

Line 15 of scrollable content

Base

Class	Description
`.ui-scroll-area`	Base class

Size

Class	Value
`.ui-scroll-area--sm`	sm
`.ui-scroll-area--lg`	lg
`.ui-scroll-area--xl`	xl

Thin

Class	Description
`.ui-scroll-area--thin`	thin

Direction

Class	Value
`.ui-scroll-area--horizontal`	horizontal
`.ui-scroll-area--both`	both

Auto-hide

Class	Description
`.ui-scroll-area--auto-hide`	auto-hide

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-scroll-area-max-height`	`calc(var(--ui-row) * 10)`	Maximum height
`--ui-scroll-area-scrollbar-size`	`calc(var(--ui-unit) * 1)`	Scrollbar size
`--ui-scroll-area-thumb-color`	`var(--ui-color-border-strong)`	Thumb control text color
`--ui-scroll-area-thumb-hover-color`	`var(--ui-color-neutral-400)`	Thumb hover color
`--ui-scroll-area-track-color`	`transparent`	Track text color
`--ui-scroll-area-thumb-radius`	`var(--ui-radius-full)`	Thumb corner radius
`--ui-scroll-area-max-height-sm`	`calc(var(--ui-row) * 5)`	Maximum height at small size
`--ui-scroll-area-max-height-lg`	`calc(var(--ui-row) * 15)`	Maximum height at large size
`--ui-scroll-area-max-height-xl`	`calc(var(--ui-row) * 20)`	Maximum height at extra-large size
`--ui-scroll-area-scrollbar-size-thin`	`calc(var(--ui-unit) * 0.5)`	Scrollbar size thin

Sizes

Small - Line 1

Small - Line 2

Small - Line 3

Small - Line 4

Small - Line 5

Small - Line 6

Small - Line 7

Small - Line 8

XL - Line 1

XL - Line 2

XL - Line 3

XL - Line 4

XL - Line 5

Large - Line 1

Large - Line 2

Large - Line 3

Large - Line 4

Large - Line 5

Large - Line 6

Large - Line 7

Large - Line 8

Large - Line 9

Large - Line 10

Large - Line 11

Large - Line 12

Large - Line 13

Large - Line 14

Large - Line 15

Large - Line 16

Large - Line 17

Large - Line 18

Large - Line 19

Large - Line 20

<div class="ui-scroll-area ui-scroll-area--sm">
  <div class="ui-scroll-area__viewport">
    <p>Small - Line 1</p>
    <p>Small - Line 2</p>
    <p>Small - Line 3</p>
    <p>Small - Line 4</p>
    <p>Small - Line 5</p>
    <p>Small - Line 6</p>
    <p>Small - Line 7</p>
    <p>Small - Line 8</p>
  </div>
</div>
<div class="ui-scroll-area ui-scroll-area--xl">
  <div class="ui-scroll-area__viewport">
    <p>XL - Line 1</p>
    <p>XL - Line 2</p>
    <p>XL - Line 3</p>
    <p>XL - Line 4</p>
    <p>XL - Line 5</p>
  </div>
</div>
<div class="ui-scroll-area ui-scroll-area--lg">
  <div class="ui-scroll-area__viewport">
    <p>Large - Line 1</p>
    <p>Large - Line 2</p>
    <p>Large - Line 3</p>
    <p>Large - Line 4</p>
    <p>Large - Line 5</p>
    <p>Large - Line 6</p>
    <p>Large - Line 7</p>
    <p>Large - Line 8</p>
    <p>Large - Line 9</p>
    <p>Large - Line 10</p>
    <p>Large - Line 11</p>
    <p>Large - Line 12</p>
    <p>Large - Line 13</p>
    <p>Large - Line 14</p>
    <p>Large - Line 15</p>
    <p>Large - Line 16</p>
    <p>Large - Line 17</p>
    <p>Large - Line 18</p>
    <p>Large - Line 19</p>
    <p>Large - Line 20</p>
  </div>
</div>

Direction

This content scrolls horizontally when it overflows the container width. Resize the window to test.

Both directions - Line 1 with long content that overflows horizontally

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

<div class="ui-scroll-area ui-scroll-area--horizontal">
  <div class="ui-scroll-area__viewport">
    <p class="ui-nowrap">This content scrolls horizontally when it overflows the container width. Resize the window to test.</p>
  </div>
</div>
<div class="ui-scroll-area ui-scroll-area--both ui-scroll-area--sm">
  <div class="ui-scroll-area__viewport">
    <p class="ui-nowrap">Both directions - Line 1 with long content that overflows horizontally</p>
    <p>Line 2</p>
    <p>Line 3</p>
    <p>Line 4</p>
    <p>Line 5</p>
    <p>Line 6</p>
    <p>Line 7</p>
    <p>Line 8</p>
  </div>
</div>

Thin Scrollbar

Thin scrollbar - Line 1

Thin scrollbar - Line 2

Thin scrollbar - Line 3

Thin scrollbar - Line 4

Thin scrollbar - Line 5

Thin scrollbar - Line 6

Thin scrollbar - Line 7

Thin scrollbar - Line 8

Thin scrollbar - Line 9

Thin scrollbar - Line 10

Thin scrollbar - Line 11

Thin scrollbar - Line 12

<div class="ui-scroll-area ui-scroll-area--thin">
  <div class="ui-scroll-area__viewport">
    <p>Thin scrollbar - Line 1</p>
    <p>Thin scrollbar - Line 2</p>
    <p>Thin scrollbar - Line 3</p>
    <p>Thin scrollbar - Line 4</p>
    <p>Thin scrollbar - Line 5</p>
    <p>Thin scrollbar - Line 6</p>
    <p>Thin scrollbar - Line 7</p>
    <p>Thin scrollbar - Line 8</p>
    <p>Thin scrollbar - Line 9</p>
    <p>Thin scrollbar - Line 10</p>
    <p>Thin scrollbar - Line 11</p>
    <p>Thin scrollbar - Line 12</p>
  </div>
</div>

Auto Hide

Scrollbar hidden until hover - Line 1

Scrollbar hidden until hover - Line 2

Scrollbar hidden until hover - Line 3

Scrollbar hidden until hover - Line 4

Scrollbar hidden until hover - Line 5

Scrollbar hidden until hover - Line 6

Scrollbar hidden until hover - Line 7

Scrollbar hidden until hover - Line 8

Scrollbar hidden until hover - Line 9

Scrollbar hidden until hover - Line 10

Scrollbar hidden until hover - Line 11

Scrollbar hidden until hover - Line 12

<div class="ui-scroll-area ui-scroll-area--auto-hide">
  <div class="ui-scroll-area__viewport">
    <p>Scrollbar hidden until hover - Line 1</p>
    <p>Scrollbar hidden until hover - Line 2</p>
    <p>Scrollbar hidden until hover - Line 3</p>
    <p>Scrollbar hidden until hover - Line 4</p>
    <p>Scrollbar hidden until hover - Line 5</p>
    <p>Scrollbar hidden until hover - Line 6</p>
    <p>Scrollbar hidden until hover - Line 7</p>
    <p>Scrollbar hidden until hover - Line 8</p>
    <p>Scrollbar hidden until hover - Line 9</p>
    <p>Scrollbar hidden until hover - Line 10</p>
    <p>Scrollbar hidden until hover - Line 11</p>
    <p>Scrollbar hidden until hover - Line 12</p>
  </div>
</div>