Display Modes

Four display variants for different use cases.

Dropdown

The default mode. Slides down from the top of the viewport like a classic Quake-style console. Toggled with a hotkey (default: backtick).

dropdown.tsx

<Terminal
  variant="dropdown"
  hotkey="`"
/>

Inline

Renders the terminal inline within the page flow. No overlay, no toggle — it's always visible. Fills its parent container.

inline.tsx

<div style={{ height: 400 }}>
  <Terminal variant="inline" />
</div>

Floating

A draggable, resizable floating window. Supports minimize and maximize. Position and size are persisted across sessions.

floating.tsx

<Terminal
  variant="floating"
  defaultOpen={true}
/>

Fullscreen

Takes over the entire viewport. Useful for terminal-first applications or dedicated terminal pages.

fullscreen.tsx

<Terminal variant="fullscreen" />

Switching Modes

Use onPopOut and onDock callbacks to let users switch between dropdown and floating mode at runtime.

switching.tsx

const [variant, setVariant] = useState<"dropdown" | "floating">("dropdown")

<Terminal
  variant={variant}
  onPopOut={() => setVariant("floating")}
  onDock={() => setVariant("dropdown")}
/>