CodeBlock — DS-GN Docs

Open this component in Storybook

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.