Components
TerminalWindow
A decorative terminal-style window chrome container
A decorative container that mimics a terminal window with traffic light buttons and an optional centered title. Defaults to a dark gray background.
Terminal
Run demo
bunx @gridland/demo terminal-windowcurl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s terminal-windowInstallation
bunx shadcn@latest add @gridland/terminal-windowUsage
import { TerminalWindow } from "@/components/ui/terminal-window"<TerminalWindow title="my-terminal">
<div>Window content here</div>
</TerminalWindow>Examples
With Title
Display a centered title in the title bar.
<TerminalWindow title="~/projects/my-app">
<div>Terminal content</div>
</TerminalWindow>Transparent Background
Use transparent to remove the default dark gray background and inherit
from the parent.
<TerminalWindow title="Preview" transparent>
<div>Content on transparent background</div>
</TerminalWindow>Window Controls
Pass onClose, onMinimize, and onMaximize callbacks to make the
traffic light buttons interactive.
<TerminalWindow
title="Editor"
onClose={() => console.log("close")}
onMinimize={() => console.log("minimize")}
onMaximize={() => console.log("maximize")}
>
<div>Window content</div>
</TerminalWindow>Min Width
Set a minimum width for the window container.
<TerminalWindow title="Wide" minWidth={600}>
<div>Content</div>
</TerminalWindow>API Reference
TerminalWindow
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Content below the title bar |
className | string | - | Additional CSS classes |
title | string | - | Centered title bar text |
minWidth | number | string | - | Minimum width of the window |
transparent | boolean | false | Remove the dark gray background |
onClose | () => void | - | Close button callback |
onMinimize | () => void | - | Minimize button callback |
onMaximize | () => void | - | Maximize button callback |