Terminal Component Examples

Interactive Terminal

Try typing commands like ls, pwd, whoami, date, help, or echo hello world:

bash

user@localhost:~$

Read-only Terminal

This shows pre-executed commands for documentation purposes:

Project Setup

Custom Terminal

With custom styling and configuration:

production-server

admin@prod:~/app$

Direct Component Usage

You can also use the component directly with inline props:

my-terminal

developer@localhost:~/docs$

Installation Steps

1. Create the component file: Save as src/components/BashTerminal.js
2. Create the CSS module: Save as src/components/BashTerminal.module.css
3. Create examples (optional): Save as src/components/TerminalExamples.js
4. Use in MDX files: Import and use as shown above

Available Props

Prop	Type	Default	Description
initialCommands	Array	[]	Pre-executed commands with outputs
title	String	"bash"	Terminal window title
height	String	"400px"	Terminal height
prompt	String	"user@localhost:~$ "	Command prompt
readOnly	Boolean	false	Disable input for display mode

Built-in Commands

• ls - List directory contents
• pwd - Print working directory
• whoami - Display current username
• date - Show current date and time
• clear - Clear terminal screen
• help - Show available commands
• echo [text] - Echo text back