> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Terminal

Animated terminal replay with character-by-character typing for CLI tutorials and demos.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Terminal playground on holydocs.com](https://holydocs.com/components/terminal).

## When to use

Use this component when source needs more context than a plain fenced block can provide, or when multiple code representations should stay synced.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Install

Package installation demo.

**Install HolyDocs**

npm install -g holydocs
  added 127 packages in 2.3s
  holydocs init
  ✓ Created docs.json
✓ Connected to Git
✓ Ready to deploy

~~~mdx
<Terminal title="Install HolyDocs">
  <Command>npm install -g holydocs</Command>
  <Output>added 127 packages in 2.3s</Output>
  <Command>holydocs init</Command>
  <Output>✓ Created docs.json
✓ Connected to Git
✓ Ready to deploy</Output>
</Terminal>
~~~

### Git Workflow

Multi-command git demo.

**Deploy**

git add -A
  git commit -m "ship it"
  [main abc1234] ship it
 3 files changed
  git push origin main
  remote: Deploying to production...
remote: ✓ Build complete
To github.com:you/repo.git
   def5678..abc1234  main -> main

~~~mdx
<Terminal title="Deploy">
  <Command>git add -A</Command>
  <Command>git commit -m "ship it"</Command>
  <Output>[main abc1234] ship it
 3 files changed</Output>
  <Command>git push origin main</Command>
  <Output>remote: Deploying to production...
remote: ✓ Build complete
To github.com:you/repo.git
   def5678..abc1234  main -> main</Output>
</Terminal>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | `'Terminal'` | Window title bar text. |
| `prompt` | `string` | `'$'` | Prompt character before commands. |
| `typingSpeed` | `number` | `50` | Milliseconds per character. |
| `loop` | `boolean` | `false` | Auto-replay after completion. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Terminal title="Install HolyDocs">
  <Command>npm install -g holydocs</Command>
  <Output>added 127 packages in 2.3s</Output>
  <Command>holydocs init</Command>
  <Output>✓ Created docs.json
✓ Connected to Git
✓ Ready to deploy</Output>
</Terminal>
~~~

## Tips

- Optimize for copy-paste reliability. Labels, tabs, and annotations should help readers choose the right snippet without modifying it first.
- Keep examples small enough to scan but realistic enough to survive first use in a real project.
- If the code block is critical to task completion, mirror the same example in prose so search and AI tools can recover the intent.

## Related Components

**[Code Block](/components/code-block)**

Fenced code blocks with syntax highlighting, language labels, and copy buttons.
**[CodeGroup](/components/code-group)**

Tabbed multi-language code block for showing the same snippet in several programming languages.
**[Mermaid](/components/mermaid)**

Create flowcharts, sequence diagrams, Gantt charts, and other visualizations from text using Mermaid syntax.

## More

- Interactive playground: [Terminal on holydocs.com](https://holydocs.com/components/terminal)
- Component library index: [/components](/components)