Scroll Area

Scroll areas scroll their content inside a fixed box and draw a slim scrollbar over it.

Vertical scrolling

ScrollArea is a namespace of six parts. Root is the box, and its size sets how much content shows. Viewport fills the Root and scrolls. Content wraps what scrolls. Scrollbar holds a Thumb.

The Scrollbar shows only while the content is taller than the Root. The thumb length is the share of the content in view, so a long list gets a short thumb. The track turns light grey while the pointer is over it or drags the thumb.

Lesson 1: Reading and comprehension
Lesson 2: Reading and comprehension
Lesson 3: Reading and comprehension
Lesson 4: Reading and comprehension
Lesson 5: Reading and comprehension
Lesson 6: Reading and comprehension
Lesson 7: Reading and comprehension
Lesson 8: Reading and comprehension
Lesson 9: Reading and comprehension
Lesson 10: Reading and comprehension
Lesson 11: Reading and comprehension
Lesson 12: Reading and comprehension
Lesson 13: Reading and comprehension
Lesson 14: Reading and comprehension
Lesson 15: Reading and comprehension
Lesson 16: Reading and comprehension
Lesson 17: Reading and comprehension
Lesson 18: Reading and comprehension
Lesson 19: Reading and comprehension
Lesson 20: Reading and comprehension

<ScrollArea.Root className="h-[240px] w-full max-w-[320px] rounded-radius-radius-8 border border-color-border">
  <ScrollArea.Viewport role="region" aria-label="Lessons">
    <ScrollArea.Content>
      <ul className="flex flex-col gap-spacing-8 p-spacing-16">
        {LESSONS.map((lesson) => (
          <li key={lesson}>{lesson}</li>
        ))}
      </ul>
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar>
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
</ScrollArea.Root>

Horizontal scrolling

orientation="horizontal" on the Scrollbar draws it along the bottom edge. A wheel over the track scrolls sideways.

Unit 1
Unit 2
Unit 3
Unit 4
Unit 5
Unit 6
Unit 7
Unit 8
Unit 9
Unit 10

<ScrollArea.Root className="w-full max-w-[320px] rounded-radius-radius-8 border border-color-border">
  <ScrollArea.Viewport role="region" aria-label="Units">
    <ScrollArea.Content>
      <ul className="flex w-max gap-spacing-12 p-spacing-16 pb-spacing-20">
        {UNITS.map((unit) => (
          <li
            key={unit}
            className="flex size-[96px] items-center justify-center rounded-radius-radius-8 bg-color-background-muted"
          >
            {unit}
          </li>
        ))}
      </ul>
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="horizontal">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
</ScrollArea.Root>

Both directions

Add a Scrollbar for each direction and a Corner. The Corner fills the square where the two tracks meet, so they never overlap.

Class 1, Period 1	Class 1, Period 2	Class 1, Period 3	Class 1, Period 4	Class 1, Period 5	Class 1, Period 6	Class 1, Period 7	Class 1, Period 8
Class 2, Period 1	Class 2, Period 2	Class 2, Period 3	Class 2, Period 4	Class 2, Period 5	Class 2, Period 6	Class 2, Period 7	Class 2, Period 8
Class 3, Period 1	Class 3, Period 2	Class 3, Period 3	Class 3, Period 4	Class 3, Period 5	Class 3, Period 6	Class 3, Period 7	Class 3, Period 8
Class 4, Period 1	Class 4, Period 2	Class 4, Period 3	Class 4, Period 4	Class 4, Period 5	Class 4, Period 6	Class 4, Period 7	Class 4, Period 8
Class 5, Period 1	Class 5, Period 2	Class 5, Period 3	Class 5, Period 4	Class 5, Period 5	Class 5, Period 6	Class 5, Period 7	Class 5, Period 8
Class 6, Period 1	Class 6, Period 2	Class 6, Period 3	Class 6, Period 4	Class 6, Period 5	Class 6, Period 6	Class 6, Period 7	Class 6, Period 8
Class 7, Period 1	Class 7, Period 2	Class 7, Period 3	Class 7, Period 4	Class 7, Period 5	Class 7, Period 6	Class 7, Period 7	Class 7, Period 8
Class 8, Period 1	Class 8, Period 2	Class 8, Period 3	Class 8, Period 4	Class 8, Period 5	Class 8, Period 6	Class 8, Period 7	Class 8, Period 8
Class 9, Period 1	Class 9, Period 2	Class 9, Period 3	Class 9, Period 4	Class 9, Period 5	Class 9, Period 6	Class 9, Period 7	Class 9, Period 8
Class 10, Period 1	Class 10, Period 2	Class 10, Period 3	Class 10, Period 4	Class 10, Period 5	Class 10, Period 6	Class 10, Period 7	Class 10, Period 8
Class 11, Period 1	Class 11, Period 2	Class 11, Period 3	Class 11, Period 4	Class 11, Period 5	Class 11, Period 6	Class 11, Period 7	Class 11, Period 8
Class 12, Period 1	Class 12, Period 2	Class 12, Period 3	Class 12, Period 4	Class 12, Period 5	Class 12, Period 6	Class 12, Period 7	Class 12, Period 8
Class 13, Period 1	Class 13, Period 2	Class 13, Period 3	Class 13, Period 4	Class 13, Period 5	Class 13, Period 6	Class 13, Period 7	Class 13, Period 8
Class 14, Period 1	Class 14, Period 2	Class 14, Period 3	Class 14, Period 4	Class 14, Period 5	Class 14, Period 6	Class 14, Period 7	Class 14, Period 8
Class 15, Period 1	Class 15, Period 2	Class 15, Period 3	Class 15, Period 4	Class 15, Period 5	Class 15, Period 6	Class 15, Period 7	Class 15, Period 8
Class 16, Period 1	Class 16, Period 2	Class 16, Period 3	Class 16, Period 4	Class 16, Period 5	Class 16, Period 6	Class 16, Period 7	Class 16, Period 8

<ScrollArea.Root className="h-[240px] w-full max-w-[320px] rounded-radius-radius-8 border border-color-border">
  <ScrollArea.Viewport role="region" aria-label="Timetable">
    <ScrollArea.Content>
      <table>
        <tbody>
          {CLASSES.map((name) => (
            <tr key={name}>
              {PERIODS.map((period) => (
                <td
                  key={period}
                  className="px-spacing-12 py-spacing-4 whitespace-nowrap"
                >
                  {`${name}, ${period}`}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar>
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar orientation="horizontal">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>

Styling

Each part merges className last, so your classes win. Give the Root a height or a width, because the Viewport only scrolls when the Root is smaller than the content. The scrollbars float over the content, so leave room at the edge when text runs under the track.

Accessibility

The scrollbars are hidden from assistive technology and never take focus. Keyboard and screen reader users scroll the Viewport.
The Viewport becomes a tab stop while its content overflows. Give it role="region" and an aria-label that names the content, such as "Lessons", so a screen reader announces what the focused box holds.
After a Tab, the Viewport scrolls with the browser scrolling keys, such as Page Down and End.
The focus ring draws around the Viewport while it has keyboard focus.

Vertical scrolling

Horizontal scrolling

Both directions

Styling

Accessibility

API

ScrollArea.Root

ScrollArea.Viewport

ScrollArea.Content

ScrollArea.Scrollbar

ScrollArea.Thumb

ScrollArea.Corner

On this page

Scroll Area

Vertical scrollingCopy Anchor Link

Horizontal scrollingCopy Anchor Link

Both directionsCopy Anchor Link

StylingCopy Anchor Link

AccessibilityCopy Anchor Link

APICopy Anchor Link

ScrollArea.RootCopy Anchor Link

ScrollArea.ViewportCopy Anchor Link

ScrollArea.ContentCopy Anchor Link

ScrollArea.ScrollbarCopy Anchor Link

ScrollArea.ThumbCopy Anchor Link

ScrollArea.CornerCopy Anchor Link

On this page

Vertical scrolling

Horizontal scrolling

Both directions

Styling

Accessibility

API

ScrollArea.Root

ScrollArea.Viewport

ScrollArea.Content

ScrollArea.Scrollbar

ScrollArea.Thumb

ScrollArea.Corner