Documentation

Documentation

CodeBlock

Terminal-styled block that shows one command, its success line, and a ready state.

The <dsgn-code-block> component renders a small terminal window: a title bar with a working-directory path, a prompt with your command, a success line built from output, and a trailing → ready line. It is a presentational marketing element for showing a single command — not a general-purpose syntax-highlighted code block.

Usage

<dsgn-code-block
  path="~/my-project"
  command="bun add @ds-gn/ui @ds-gn/tokens"
  output="2 packages installed"
></dsgn-code-block>

Import the component module in your application entrypoint:

import '@ds-gn/ui/code-block';

Props

Prop Type Default Description
command string '' Command shown after the $ prompt.
output string '' Success line, rendered after a ✓.
path string '~/project' Working-directory path shown in the title bar.
surface 'light' | 'dark' 'dark' Semantic token surface to use. Defaults to dark.

Production command, output, and path values follow the system-wide content ownership policy. Supply them from your application’s content source rather than treating the standalone path value as production copy.

Slots

The component renders its own terminal chrome and takes no slotted content. All copy comes in through command, output, and path.

Examples

Install command

<dsgn-code-block
  path="~/my-app"
  command="bun add @ds-gn/ui @ds-gn/tokens"
  output="2 packages installed"
></dsgn-code-block>

On a light surface

<dsgn-code-block
  surface="light"
  command="bun run build"
  output="build complete"
></dsgn-code-block>

Accessibility

The output is rendered as static text inside a <pre>, so it is read in order: path, command, success line, ready line. The window chrome (the three dots) is decorative. Because the ✓ and → ready lines are fixed, keep output phrased so it reads correctly as a completed step.

Esc