TerminalScreen

A still picture of a terminal, such as the last lines of an agent session on an overview card. Pick it to preview; a live terminal needs xterm in the app.

TerminalScreen

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, TerminalScreen

claude · skriblyUI

✔ Read src/content/Markdown.tsx
✔ Edit src/content/Markdown.tsx (+12 −3)
● Running npm test …

 ✓ src/content/Markdown.test.tsx (6 tests) 41ms
 ✓ src/content/CodeBlock.test.tsx (4 tests) 38ms

 Test Files  2 passed (2)
      Tests  10 passed (10)

>

Dark theme, TerminalScreen

claude · skriblyUI

✔ Read src/content/Markdown.tsx
✔ Edit src/content/Markdown.tsx (+12 −3)
● Running npm test …

 ✓ src/content/Markdown.test.tsx (6 tests) 41ms
 ✓ src/content/CodeBlock.test.tsx (4 tests) 38ms

 Test Files  2 passed (2)
      Tests  10 passed (10)

>

High contrast theme, TerminalScreen

claude · skriblyUI

✔ Read src/content/Markdown.tsx
✔ Edit src/content/Markdown.tsx (+12 −3)
● Running npm test …

 ✓ src/content/Markdown.test.tsx (6 tests) 41ms
 ✓ src/content/CodeBlock.test.tsx (4 tests) 38ms

 Test Files  2 passed (2)
      Tests  10 passed (10)

>

UsageLink to the section Usage

tsx

import { TerminalScreen } from '@skribly/ui/content'

tsx

<TerminalScreen label="Claude Code session" title="claude · skriblyUI" text={lines} rows={12} showCursor />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The screen is a named group in the tab order and scrolls sideways inside its box.
ANSI colour codes are removed, so screen readers get plain text.
The cursor is decorative, hidden from screen readers, and only blinks without reduced motion.

This demo runs through axe in all three themes on every test run. See what the tests check.