Utility
Terminal
█
scroll-view-demo █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Installation
$ pnpm dlx shadcn@latest add @termcn/opentui/scroll-view
Usage
import { ScrollView } from "@/components/ui/scroll-view";<ScrollView height={5} contentHeight={20}>
<Text>Line 1</Text>
<Text>Line 2</Text>
<Text>Line 3</Text>
</ScrollView>Examples
Scrollbar and keys
Set contentHeight to the total line count of scrollable content so the thumb size reflects how much is hidden. Use arrow keys, Page Up/Down, Home, and End to scroll.
Terminal
█
scroll-view-scrollbar █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█API Reference
ScrollView
| Prop | Type | Default |
|---|---|---|
height | number | required |
children | ReactNode | required |
contentHeight | number | 0 |
showScrollbar | boolean | true |
scrollbarColor | string | - |
thumbColor | string | - |
trackChar | string | "│" |
thumbChar | string | "█" |