Terminal

Terminal is a text based user interface.


import { Terminal } from 'primereact/terminal';
import { TerminalService } from 'primereact/terminalservice';
         

Terminal is interacted with TerminalService api using command, response and clear events. The command event requires a callback to handle the commands, the responseemits the response of the command and emitting clear reset the terminal.

Enter "date" to display the current date, "greet {0}" for a message, "random" to get a random number and "clear" to clear all commands.

Welcome to PrimeReact
primereact $ 

<Terminal 
    welcomeMessage="Welcome to PrimeReact" 
    prompt="primereact $" 
    pt={{
        root: 'bg-gray-900 text-white border-round',
        prompt: 'text-gray-400 mr-2',
        command: 'text-primary-300',
        response: 'text-primary-300'
    }} 
/>
         

Screen Reader

Terminal component has an input element that can be described with aria-label or aria-labelledby props. The element that lists the previous commands has aria-live so that changes are received by the screen reader.

Keyboard Support

KeyFunction
tabMoves focus through the input element.
enterExecutes the command when focus in on the input element.
Summer Sale 2025
SUMMER SALE2025
Use coupon code PRSM25 at checkout to get 50% OFF everything in PrimeStore and PrimeBlocks.
Learn More