npx shadcn@latest add "https://www.terminal-kit.com/r/terminal-window.json"| 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. |
| theme | "default" | "grok" | "claude" | "default" | Built-in palette. Default is a neutral dark terminal; grok is warm dark; claude matches the Claude Code product page terminal mockup. |
| variant | "dark" | "light" | "dark" | Light palette override via theme-specific classes (e.g. .terminal-theme-grok-light). Site light mode (html:not(.dark)) also switches the active theme to its light tokens. |
| 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. |
| headerAction | ReactNode | — | Optional control rendered at the end of the window chrome header. |
| className | string | — | Additional CSS classes on the window shell. |
| ...props | HTMLDivElement | — | Standard div props. |
| 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. |