Utility
AI
Terminal
scroll-view-demo
No opentui live preview is registered for this example yet.
Installation
pnpm dlx shadcn@latest add @termcn/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
No opentui live preview is registered for this example yet.
API Reference
ScrollView
| Prop | Type | Default |
|---|---|---|
height | number | required |
children | ReactNode | required |
contentHeight | number | 0 |
showScrollbar | boolean | true |
scrollbarColor | string | undefined |
thumbColor | string | undefined |
trackChar | string | "│" |
thumbChar | string | "█" |