` | built-in en/ar | Translations. |
Also exported: `AnsiText` (spans for one string, for use inside your own ``), `parseAnsi`, `parseAnsiRows`,
`stripAnsi`, `ansiColor`, `ansi256`, and the `useFollowScroll` hook used by [LogViewer](https://docs.nasaqui.com/components/log-viewer) and
[DeployView](https://docs.nasaqui.com/components/deploy-view).
### ANSI support
SGR codes: reset, bold, dim, italic, underline, inverse, strike, the 16 standard and bright colours, 256-colour and
truecolour. A carriage return redraws the row, so progress bars show their last state. Other escapes (cursor
movement, OSC titles) are removed.
## Examples
### Streaming
```tsx
const [lines, setLines] = useState([{ kind: "command", text: "pnpm test" }]);
// append as chunks arrive: setLines((l) => [...l, chunk])
setLines([])} />;
```
### A command box
```tsx
{ setLines((l) => [...l, { kind: "command", text: cmd }]); await run(cmd); }} />
```
## Accessibility
| Key | Action |
| --- | --- |
| `Tab` | Output region, then the header buttons and input |
| Arrow keys / `PageUp` / `PageDown` | Scroll the focused output |
| `End` | Jump to the newest line and resume following |
| `Up` / `Down` | History, in the input |
- The output is `role="log"` with a name, so screen readers can read it; it does not announce every streamed line.
- Colour is supplementary: errors also carry the `error` kind text and stay readable without colour.
- The jump button is a real button and appears only when following stopped.
## RTL & i18n
- The surface is `dir="ltr"` in Arabic pages; only the chrome (title, tooltips, buttons) is translated.
- Built-in Arabic strings; override with `labels`.
- Header controls sit on the logical inline-end side.
## Styling & tokens
- Surface `bg-nq-surface-soft` with `border-border` and `rounded-surface`; text `text-nq-fg-body`; kinds use `text-nq-danger-text`, `-success-text` and `-info-text`.
- ANSI colours are `var(--nq-*)` values; bright variants mix toward `--nq-fg`.
- Slots: `terminal`, `terminal-header`, `terminal-output`, `terminal-row`, `terminal-input`. `data-streaming` on the root.
## Do / Don't
- **Do** append lines instead of rebuilding the whole array when you can.
- **Do** keep `maxLines` modest for very chatty processes.
- **Don't** print secrets to the terminal; there is no masking.
- **Don't** expect keyboard-driven programs to work.
## Related
- [LogViewer](https://docs.nasaqui.com/components/log-viewer) · [DeployView](https://docs.nasaqui.com/components/deploy-view) · [CodeBlock variants](https://docs.nasaqui.com/components/code-block-variants)
## Lab
https://docs.nasaqui.com/?path=/docs/components-developer-tools-terminal--docs
## Code
### React
```tsx
import { Terminal } from "@fadymondy/nasaq/web";
export function Build() {
return (
);
}
```
### shadcn
```tsx
import { Terminal } from "@/components/ui/terminal";
export function Build() {
return (
);
}
```
### Vue
```vue
```
### Blade
```blade
@php
$lines = [
['kind' => 'command', 'text' => 'pnpm build'],
"\e[32m✓\e[0m compiled 214 modules",
['kind' => 'error', 'text' => 'warning: chunk is larger than 500 kB'],
];
@endphp
```
### HTML + Alpine
```html
```