Terminal Window - terminal-kit

cat components/terminal-window.tsx

❯

# terminal-window

Chrome wrapper with traffic lights, path, and labeled progress bar.

──

examples

projects/main malayvasa/folder

|context13.27%

──

component api

TerminalWindow

Top-level shell with header chrome, scroll body, and optional footer.

Prop	Type	Default	Description
path	string	—	Path label in the header.
progress	number \| { value, label?, showValue? } \| false	undefined	Header progress bar. Pass false to hide.
showTrafficLights	boolean	true	Show macOS-style traffic lights in the header.
variant	"dark" \| "light"	"dark"	Color theme variant.
footer	ReactNode	—	Pinned footer slot — usually Input.
header	ReactNode	—	Optional header slot above scroll content.
fill	boolean	false	Stretch to fill a fixed-height window and scroll internally.
pinScrollBottom	boolean	false	Pin scroll content to the bottom as new lines appear.
bodyClassName	string	—	Classes for the inner body layout wrapper.
className	string	—	Additional CSS classes on the window shell.
...props	HTMLDivElement	—	Standard div props.

TerminalBody

Deprecated — pass footer, header, fill, and pinScrollBottom to TerminalWindow instead.

Prop	Type	Default	Description
footer	ReactNode	—	Pinned footer slot — usually Input.
header	ReactNode	—	Optional header slot above scroll content.
pinScrollBottom	boolean	false	Pin scroll content to the bottom as new lines appear.
fill	boolean	false	Stretch to fill a fixed-height window and scroll internally.

──

install

npx shadcn@latest add "https://www.terminal-kit.com/r/terminal-window.json"