Utility
AI
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/scroll-view.json
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
import { Box, Text } from "ink";
import { ScrollView } from "@/registry/ui/scroll-view";
const lines = Array.from({ length: 12 }, (_, i) => `Line ${i + 1}`);
export default function ScrollViewScrollbar() {
return (
<Box flexDirection="column" gap={1}>
<Text dimColor>↑↓ PgUp/PgDn · Home/End · proportional thumb</Text>
<ScrollView
contentHeight={lines.length}
height={5}
thumbChar="▐"
trackChar="│"
>
{lines.map((line) => (
<Text key={line}>{line}</Text>
))}
</ScrollView>
</Box>
);
}
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 | "█" |