Terminal

An unstyled terminal component for building command-line style interfaces with full control over layout and styling.

Build fully custom terminal interfaces with complete control over layout and styling.

Welcome to PrimeReact Terminal. Type "help" for available commands.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Terminal with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Welcome, CommandList, Command, CommandValue, CommandPromptLabel, CommandResponse, Prompt, PromptLabel, PromptValue
Synchronous and asynchronous command execution via onCommand
Built-in command history navigation with Arrow Up
Clears terminal when onCommand returns null
Default content rendering — CommandList and Prompt render their children automatically when none are provided

Usage#

import { Terminal } from 'primereact/terminal';

<Terminal.Root>
    <Terminal.Welcome />
    <Terminal.CommandList />
    <Terminal.Prompt>
        <Terminal.PromptLabel />
        <Terminal.PromptValue />
    </Terminal.Prompt>
</Terminal.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Terminal.Root as="section"></Terminal.Root>
<Terminal.CommandList as="ul"></Terminal.CommandList>

Default elements: Root=div, Welcome=div, CommandList=div, Command=div, CommandValue=span, CommandPromptLabel=span, CommandResponse=div, Prompt=div, PromptLabel=span, PromptValue=input.

Render Function Children#

Root accepts a render function as children, providing access to the component instance.

<Terminal.Root prompt="$" onCommand={commandHandler}>
    {(instance) => <span>{instance.state.commands.length} commands executed</span>}
</Terminal.Root>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Welcome to PrimeReact Terminal. Type "help" for available commands.

/* Select a part to see its CSS selector for custom styling */

API#

TerminalRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`prompt`	`string`	—
Prompt text for each command.
`onCommand`	`TerminalCommandHandler`	—
Callback function invoked when a command is entered. Return value determines the response: - React.ReactNode: Displayed as command response - null: Clears the terminal - undefined: No response shown Supports async functions for delayed responses.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"root"`

Defines passthrough(pt) options of Terminal component.

label	type	description
root	TerminalRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
commandList	TerminalRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the commandList's DOM element.
commands	TerminalRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the commands' DOM element.
commandValue	TerminalRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the command value's DOM element.
commandResponse	TerminalRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the command response's DOM element.
prompt	TerminalRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the prompt's DOM element.
promptValue	TerminalRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the prompt value's DOM element.
promptLabel	TerminalRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the prompt label's DOM element.

TerminalWelcome#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalWelcomeInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalWelcomeInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalWelcomeInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalWelcomePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalWelcomeInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"welcome"`

Defines passthrough(pt) options of TerminalWelcome component.

label	type	description
root	TerminalWelcomePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TerminalCommandList#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalCommandListInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalCommandListInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalCommandListInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalCommandListPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalCommandListInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"commandlist"`

Defines passthrough(pt) options of TerminalCommandList component.

label	type	description
root	TerminalCommandListPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TerminalCommand#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalCommandInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalCommandInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalCommandInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalCommandPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalCommandInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`index`	`number`	—
Index of the command in the list.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"command"`

Defines passthrough(pt) options of TerminalCommand component.

label	type	description
root	TerminalCommandPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TerminalCommandValue#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalCommandValueInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalCommandValueInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalCommandValueInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalCommandValuePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalCommandValueInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"commandvalue"`

Defines passthrough(pt) options of TerminalCommandValue component.

label	type	description
root	TerminalCommandValuePassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

TerminalCommandPromptLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalCommandPromptLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalCommandPromptLabelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalCommandPromptLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalCommandPromptLabelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalCommandPromptLabelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"commandpromptlabel"`

Defines passthrough(pt) options of TerminalCommandPromptLabel component.

label	type	description
root	TerminalCommandPromptLabelPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

TerminalCommandResponse#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalCommandResponseInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalCommandResponseInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalCommandResponseInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalCommandResponsePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalCommandResponseInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"commandresponse"`

Defines passthrough(pt) options of TerminalCommandResponse component.

label	type	description
root	TerminalCommandResponsePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TerminalPrompt#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalPromptInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalPromptInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalPromptInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalPromptPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalPromptInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"prompt"`

Defines passthrough(pt) options of TerminalPrompt component.

label	type	description
root	TerminalPromptPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TerminalPromptLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalPromptLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalPromptLabelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalPromptLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalPromptLabelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalPromptLabelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"promptlabel"`

Defines passthrough(pt) options of TerminalPromptLabel component.

label	type	description
root	TerminalPromptLabelPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

TerminalPromptValue#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TerminalPromptValueInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TerminalPromptValueInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TerminalPromptValueInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TerminalPromptValuePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TerminalPromptValueInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"terminal"`
`data-part`	`"promptvalue"`

Defines passthrough(pt) options of TerminalPromptValue component.

label	type	description
root	TerminalPromptValuePassThroughType<InputHTMLAttributes<HTMLInputElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

The command response element has aria-live="polite" so that new responses are announced by the screen reader. Clicking anywhere on the terminal root focuses the input element.

Keyboard Support#

Key	Function
`tab`	Moves focus through the input element.
`enter`	Executes the command when focus is on the input element.
`arrow up`	Recalls the previous command from history.