Terminal

For isolated previews, theme switching, and sandbox editing, open the Terminal playground on holydocs.com .

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.

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.

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 completeTo github.com:you/repo.git   def5678..abc1234  main -> main</Output></Terminal>

Props

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

More

• Interactive playground: Terminal on holydocs.com
• Component library index: /components