Scrollable

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Scrollable provides a customizable scrollable container with optional scrollbars, supporting both vertical and horizontal scrolling with fine-grained control over scrollbar appearance and behavior. It wraps Radix UI's ScrollArea component, offering a flexible scrolling interface with customizable scrollbar visibility, size options, and automatic scroll positioning. It ensures consistent scrolling patterns across the interface with smooth scrolling behavior and accessibility support.

Props

Name	Default	Description
`children`	`required`	The content to display inside the scrollable container.
`disableHorizontal`	`false`	Whether to disable horizontal scrolling and hide the horizontal scrollbar.
`disableVertical`	`false`	Whether to disable vertical scrolling and hide the vertical scrollbar.
`scrollReverse`	`false`	Whether to automatically scroll to the bottom when the component mounts.
`smallScrollbar`	`false`	Whether to use a smaller scrollbar size.

Basic Scrollable

Use for standard scrollable content areas.

Vertical Scrolling Only

Disable horizontal scrolling for vertical-only content.

Horizontal Scrolling Only

Disable vertical scrolling for horizontal-only content.

Scroll to Bottom

Automatically scroll to the bottom on mount, useful for chat feeds or logs.

Small Scrollbar

Use smaller scrollbars for more compact designs.

With Ref for Programmatic Control

Use refs to control scrolling programmatically.

In Dialog Content

Use Scrollable within modals for long content.

In Chat Interfaces

Use Scrollable for chat feeds that scroll to bottom.

Both Scrollbars Disabled

Disable all scrolling when content fits within the container.

Scrollable / Usage

Scrollable / Accessibility

On this page

Props

Basic Scrollable

Vertical Scrolling Only

Horizontal Scrolling Only

Scroll to Bottom

Small Scrollbar

With Ref for Programmatic Control

In Dialog Content

In Chat Interfaces

Both Scrollbars Disabled

Scrollable

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Props

Name	Default	Description
`children`	`required`	The content to display inside the scrollable container.
`disableHorizontal`	`false`	Whether to disable horizontal scrolling and hide the horizontal scrollbar.
`disableVertical`	`false`	Whether to disable vertical scrolling and hide the vertical scrollbar.
`scrollReverse`	`false`	Whether to automatically scroll to the bottom when the component mounts.
`smallScrollbar`	`false`	Whether to use a smaller scrollbar size.