# Display Terminal Output

Use `useTerminal` to create a read-only xterm terminal and render shell command output with full ANSI color support.

## Basic Usage

```tsx
import { useTerminal, useShell, TerminalThemes } from "@fluxlay/react";

function Terminal() {
  const { terminalRef, instance } = useTerminal({
    fontSize: 14,
    theme: TerminalThemes.dracula
  });

  useShell("my-command", { terminal: instance });

  return <div ref={terminalRef} style={{ height: 400, width: "100%" }} />;
}
```

## Customization

### Font

```tsx
const { terminalRef, instance } = useTerminal({
  fontSize: 16,
  fontFamily: "'JetBrains Mono', monospace"
});
```

### Theme

Choose from [20+ built-in themes](/en/studio/developer/reference/sdk/terminal-themes.md):

```tsx
// Dark themes
TerminalThemes.dark.default;
TerminalThemes.dark.modern;
TerminalThemes.nord;
TerminalThemes.dracula;
TerminalThemes.tokyoNight;
TerminalThemes.oneDark;

// Light themes
TerminalThemes.light.default;
TerminalThemes.solarized.light;
TerminalThemes.catppuccin.latte;
```

## Layout

The terminal automatically fits its container using the FitAddon. Set the size via the parent element:

```tsx
<div ref={terminalRef} className="h-full w-full" />
```

## Notes

- The terminal is read-only — no user input is accepted.
- The cursor is hidden.
- Scrollback is disabled.
- The terminal fills its container via CSS overrides.

See the [useTerminal Reference](/en/studio/developer/reference/sdk/use-terminal.md) for full API details.