Terminal Window

The <TerminalWindow> component renders a terminal-style window with a dark background and monospace text. Use <Command>, <Output>, and <Line> to compose rich terminal sessions with colored formatting. Built on top of DesktopWindow.

Basic commands

Code

import { TerminalWindow, Command, Output } from '@theme'

<TerminalWindow>
  <Command>pnpm install ciderpress</Command>
  <Output>
    Packages: +42{'\n'}Progress: resolved 187, reused 180, downloaded 7{'\n'}Done in 2.3s
  </Output>
</TerminalWindow>

Output

Terminal

pnpm install ciderpress

Packages: +42 Progress: resolved 187, reused 180, downloaded 7 Done in 2.3s

Multiple commands

Code

<TerminalWindow>
  <Command>ciderpress sync</Command>
  <Output>Synced 24 pages (3 new, 2 updated, 19 skipped)</Output>
  <Command>ciderpress build</Command>
  <Output>Build completed in 4.2s{'\n'}Output: .ciderpress/dist/</Output>
</TerminalWindow>

Output

Terminal

ciderpress syncSynced 24 pages (3 new, 2 updated, 19 skipped)ciderpress buildBuild completed in 4.2s Output: .ciderpress/dist/

Custom title

Code

<TerminalWindow title="zsh — ~/projects/my-docs">
  <Command>ls docs/</Command>
  <Output>getting-started/ concepts/ references/ README.md</Output>
</TerminalWindow>

Output

zsh — ~/projects/my-docs

ls docs/getting-started/ concepts/ references/ README.md

Colored output

Use <Line> within <Output> for colored and styled text:

Code

import { TerminalWindow, Command, Output, Line } from '@theme'

<TerminalWindow>
  <Command>ciderpress check</Command>
  <Output>
    <Line color="step" bold>
      {'◆'}
    </Line>{' '}
    <Line bold>ciderpress check</Line>
    {'\n'}
    <Line color="bar">│</Line>
    {'\n'}
    <Line color="success">{'◇'}</Line> Config valid{'\n'}
    <Line color="success">{'◇'}</Line> 24 pages resolved{'\n'}
    <Line color="warn">{'▲'}</Line> <Line color="yellow">2 pages missing descriptions</Line>
    {'\n'}
    <Line color="bar">│</Line>
    {'\n'}
    <Line color="success" bold>
      {'└'}
    </Line>{' '}
    <Line color="success">All checks passed</Line>
  </Output>
</TerminalWindow>

Output

Terminal

ciderpress check◆ ciderpress check │

◇ Config valid ◇ 24 pages resolved ▲ 2 pages missing descriptions

│ └ All checks passed

Error output

Code

<TerminalWindow>
  <Command>ciderpress build</Command>
  <Output>
    <Line color="step" bold>
      {'◆'}
    </Line>{' '}
    <Line bold>ciderpress build</Line>
    {'\n'}
    <Line color="bar">│</Line>
    {'\n'}
    <Line color="error">{'✖'}</Line> <Line color="red">Configuration validation failed</Line>
    {'\n'}
    <Line color="bar">│</Line>
    {'\n'}
    <Line color="bar">│</Line>{' '}
    <Line color="red" bold>
      sections
    </Line>
    : must have at least one entry{'\n'}
    <Line color="bar">│</Line>{' '}
    <Line color="red" bold>
      title
    </Line>
    : required{'\n'}
    <Line color="bar">│</Line>
    {'\n'}
    <Line color="error" bold>
      {'└'}
    </Line>{' '}
    <Line color="red">Build failed</Line>
  </Output>
</TerminalWindow>

Output

Terminal

ciderpress build◆ ciderpress build │ ✖Configuration validation failed │ │

sections

: must have at least one entry │

title

: required │

└ Build failed

Git workflow

Code

<TerminalWindow title="zsh">
  <Command>git status</Command>
  <Output>
    On branch <Line color="green">feat/docs</Line>
    {'\n'}
    Changes not staged for commit:{'\n'}
    {'  '}
    <Line color="red">modified: ciderpress.config.ts</Line>
    {'\n'}
    {'  '}
    <Line color="red">modified: docs/getting-started/intro.md</Line>
    {'\n'}
    {'\n'}
    Untracked files:{'\n'}
    {'  '}
    <Line color="green">docs/concepts/workspaces.md</Line>
  </Output>
  <Command>git add -A && git commit -m "docs: add workspace guide"</Command>
  <Output>
    <Line color="green">[feat/docs 3a1b2c3]</Line> docs: add workspace guide{'\n'}
    {'  '}3 files changed, 84 insertions(+), 12 deletions(-)
  </Output>
</TerminalWindow>

Output

zsh

git status

On branch feat/docs

Changes not staged for commit:

modified: ciderpress.config.ts modified: docs/getting-started/intro.md

Untracked files:

docs/concepts/workspaces.mdgit add -A && git commit -m "docs: add workspace guide"

[feat/docs 3a1b2c3] docs: add workspace guide 3 files changed, 84 insertions(+), 12 deletions(-)

Available colors

Terminal colors

Color	Usage
`red`	Errors, deletions, removed files
`green`	Success, additions, new files
`blue`	Links, info highlights
`yellow`	Warnings, caution
`cyan`	Accents, metadata
`magenta`	Branding, special markers
`white`	Emphasis on dark background
`gray`	Secondary, muted text

Semantic colors

Color	Usage
`success`	Checkmarks, completion (green)
`error`	Failures, errors (red)
`warn`	Warnings, caution (yellow)
`info`	Informational highlights (blue)
`muted`	De-emphasized text (gray)
`bar`	Clack-style vertical bars (gray)
`step`	Clack-style step markers (purple)

Modifiers

Prop	Effect
`bold`	Bold weight
`dim`	Reduced opacity

Props

TerminalWindow

Prop	Type	Required	Default	Description
`title`	`string`	no	`'Terminal'`	Title in the center of the title bar
`children`	`ReactNode`	yes	—	Terminal content (Command, Output elements)

Command

Prop	Type	Required	Default	Description
`children`	`ReactNode`	yes	—	Command text (rendered after `$` prompt)

Output

Prop	Type	Required	Default	Description
`children`	`ReactNode`	yes	—	Output text (supports nested Line elements)

Line

Prop	Type	Required	Default	Description
`color`	`TerminalColor`	no	—	Text color (terminal or semantic)
`bold`	`boolean`	no	`false`	Bold text
`dim`	`boolean`	no	`false`	Dimmed text
`children`	`ReactNode`	yes	—	Text content

#Terminal Window

#Basic commands

#Multiple commands

#Custom title

#Colored output

#Error output

#Git workflow

#Available colors

#Terminal colors

#Semantic colors

#Modifiers

#Props

#TerminalWindow

#Command

#Output

#Line

#References

Terminal Window

Basic commands

Multiple commands

Custom title

Colored output

Error output

Git workflow

Available colors

Terminal colors

Semantic colors

Modifiers

Props

TerminalWindow

Command

Output

Line

References