Loading navigation…
User
API and Development
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.
| 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. |
Use for standard scrollable content areas.
Disable horizontal scrolling for vertical-only content.
Disable vertical scrolling for horizontal-only content.
Automatically scroll to the bottom on mount, useful for chat feeds or logs.
Use smaller scrollbars for more compact designs.
Use refs to control scrolling programmatically.
Use Scrollable within modals for long content.
Use Scrollable for chat feeds that scroll to bottom.
Disable all scrolling when content fits within the container.