TypingTerminal

Code

import { TypingTerminal } from "@fadymondy/nasaq/web";export function Hero() {  return (    <TypingTerminal      title="~/my-shop"      steps={[        { cmd: "npx create-togo-app my-shop", out: ["\u001b[32m✓\u001b[0m Installed 214 packages"] },        { cmd: "cd my-shop && togo dev", out: ["ready on http://localhost:5173"] },      ]}    />  );}

Website · beta

Live examples and controls: TypingTerminal in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/typing-terminal.json

Shows how a tool is used: it types each command, prints its output line by line, then offers Replay. Output may contain ANSI colours. An endSlot appears at the end for a screenshot of the result or a call to action.

When to useCopy Anchor Link

• A marketing hero or a docs page that shows an install or a quick start.

When not to useCopy Anchor Link

• A real, interactive shell: use Terminal.
• A command people copy: use a code block with a copy button. The animation is decoration.

ImportCopy Anchor Link

import { TypingTerminal } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { TypingTerminal } from "@fadymondy/nasaq/web";

export function Hero() {
  return (
    <TypingTerminal
      title="~/my-shop"
      steps={[
        { cmd: "npx create-togo-app my-shop", out: ["\u001b[32m✓\u001b[0m Installed 214 packages"] },
        { cmd: "cd my-shop && togo dev", out: ["ready on http://localhost:5173"] },
      ]}
    />
  );
}

AnatomyCopy Anchor Link

TypingTerminal            data-slot="typing-terminal"  dir="ltr"
├─ header                 dots, title, Replay
├─ transcript             sr-only <pre>, the whole session
└─ body                   data-slot="typing-terminal-body"  fixed height
   ├─ rows                aria-hidden: prompt + command, output lines
   └─ end slot            data-slot="typing-terminal-end"

APICopy Anchor Link

div props (except children and title) plus:

AccessibilityCopy Anchor Link

• Screen readers get the whole transcript once, as text; the animated rows are hidden from them.
• With reduced motion (or under automation) the full transcript shows at once.
• Replay is a real button. The end slot stays reachable.

RTL & i18nCopy Anchor Link

• The terminal is always left to right, as code is. Labels (title, Replay) are in English and Arabic.

Styling & tokensCopy Anchor Link

• bg-nq-surface-soft, a hairline border and the mono font. ANSI colours map to the chart tokens via AnsiText.

Do / Don'tCopy Anchor Link

• Do keep it to two or three commands.
• Don't animate on every scroll. Use play once, or loop for a hero that stays.

RelatedCopy Anchor Link

• terminal
• marketing-sections

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-website-typing-terminal--docs