Window

The OpenCode terminal surface.

import { OpencodeMessage } from "../components/opencode-message";
import { OpencodeWindow } from "../components/opencode-window";

export default function OpencodeWindowExample() {
  return (
    <div className="w-full p-6">
      <OpencodeWindow className="px-[2ch] py-[1lh]">
        <OpencodeMessage>Any OpenCode content goes here.</OpencodeMessage>
      </OpencodeWindow>
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/opencode-window

OpencodeWindow is a shadcn Card that paints the TUI background, sets the monospace font and a 13px type size with a 20px line. The other components space themselves in terminal cells, ch across and lh down, so put them inside a window or anything with the same font. It has no padding, so a session can split into a transcript and a sidebar. It accepts every Card prop.

Used in