Scroll Area

A component for custom scrollable regions with styled scrollbars and viewport controls.

Introduction

Installation

Composition

Styling

API Reference

Accessibility

Server Rendering

Testing

Release Notes

Migration Guide

Anatomy

Usage

<script>
  import {ScrollArea} from 'ui-ingredients';
</script>

<ScrollArea.Root>
  <ScrollArea.Viewport>
    <ScrollArea.Content>
      <p>Scrollable content...</p>
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>

API Reference

Root

Prop	Default	Description
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string; }>` The ids of the scroll area elements
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-overflow-x`	Present when the content overflows the x-axis
`data-overflow-y`	Present when the content overflows the y-axis
`data-part`	root
`data-scope`	scroll-area

Content

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-overflow-x`	Present when the content overflows the x-axis
`data-overflow-y`	Present when the content overflows the y-axis
`data-part`	content
`data-scope`	scroll-area

Corner

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-hover`	Present when hovered
`data-overflow-x`	Present when the content overflows the x-axis
`data-overflow-y`	Present when the content overflows the y-axis
`data-part`	corner
`data-scope`	scroll-area
`data-state`	"hidden" \| "visible"

Scrollbar

Prop	Default	Description
`orientation`	`'vertical'`	`'horizontal' \| 'vertical'` The orientation of the scrollbar.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-dragging`	Present when in the dragging state
`data-hover`	Present when hovered
`data-orientation`	The orientation of the scrollbar
`data-overflow-x`	Present when the content overflows the x-axis
`data-overflow-y`	Present when the content overflows the y-axis
`data-part`	scrollbar
`data-scope`	scroll-area
`data-scrolling`	Present when scrolling

Thumb

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-dragging`	Present when in the dragging state
`data-hover`	Present when hovered
`data-orientation`	The orientation of the thumb
`data-part`	thumb
`data-scope`	scroll-area

Viewport

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-at-bottom`	Present when scrolled to the bottom edge
`data-at-left`	Present when scrolled to the left edge
`data-at-right`	Present when scrolled to the right edge
`data-at-top`	Present when scrolled to the top edge
`data-overflow-x`	Present when the content overflows the x-axis
`data-overflow-y`	Present when the content overflows the y-axis
`data-part`	viewport
`data-scope`	scroll-area