Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/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
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 | "█" |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Keyboard: Arrow keys move the current item or viewport;
Home/Endmove to the boundaries;PageUp/PageDownmove by a page;Enter/Spaceselect or expand when supported;Tab/Shift+Tableave the composite. - Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.