Themes
- Default
- Catppuccin
- Dracula
- High Contrast
- High Contrast Light
- Monokai
- Nord
- One Dark
- Solarized
- Tokyo Night
- AMOLED
- Aura
- Ayu
- Carbonfox
- Catppuccin Frappe
- Catppuccin Macchiato
- Cobalt2
- Cursor
- Everforest
- Flexoki
- GitHub
- Gruvbox
- Kanagawa
- Lucent Orng
- Material
- Matrix
- Mercury
- Night Owl
- OC-2
- One Dark Pro
- OpenCode
- Orng
- Osaka Jade
- Palenight
- Rose Pine
- Shades of Purple
- Synthwave '84
- Vercel
- Vesper
- Zenburn
Utility
AI
Terminal
scroll-view-demo
No opentui live preview is registered for this example yet.
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
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 | - |
thumbColor | string | - |
trackChar | string | "│" |
thumbChar | string | "█" |