TerminalBlock

Usage

<TerminalBlock> is a code block with a terminal-window visual treatment — three traffic-light dots in the title bar and a dark background. Use sparingly for hero sections where you want to show "type these commands" with extra visual weight.

<TerminalBlock title="bash">
{`$ npm install codivdocs
$ codivdocs init
$ git push`}
</TerminalBlock>

$ npm install codivdocs
$ codivdocs init
$ git push

Without title

The title is optional — omit it for a frame-only look:

<TerminalBlock>
{`$ codivdocs dev
Starting development server...
Listening on http://localhost:4242`}
</TerminalBlock>

$ codivdocs dev
Starting development server...
Listening on http://localhost:4242

Always dark

The terminal frame is intentionally always dark, regardless of the page theme. This matches user expectation — terminals are dark even on light websites.

If you need a code block that follows the page theme, use a regular markdown fence or <CodeBlock> instead.

When to use

• Quickstart "type these commands" sections — visual weight tells readers "this is the action you take"

• Landing pages — terminal screenshots are a developer-marketing trope, this gives you the same vibe without the screenshot

• Step-by-step CLI tutorials — pair with <Steps> to walk through a CLI workflow

When NOT to use

• Generic code examples — use markdown fences (lighter weight, theme-aware)

• API request/response — use <RequestExample> / <ResponseExample>

• Multi-language code — use <CodeGroup>

TerminalBlock is for terminal commands specifically, not code in general.

Props