> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CommandBlock

> Display command lines with an optional action.

export const StoryEmbed = ({storyId, title, height = 120}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" allow="clipboard-write" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`CommandBlock` displays each supplied command with a prompt marker. It does not execute commands or provide copying automatically. Supply `actions` with any React node, such as a [Button](/ui/primitives/input/button), link or status. Command text uses `pre` and `code` semantics, preserves line breaks, and wraps within the available width. Prompt markers are decorative.

<StoryEmbed storyId="ui-components-data-display-commandblock--display" title="CommandBlock example" height={130} />

## Usage

```tsx theme={null}
import { useState } from 'react';
import { CommandBlock } from 'twenty-ui/components/data-display';
import { Button } from 'twenty-ui/primitives/input';

export const InstallCommand = () => {
  const [copyLabel, setCopyLabel] = useState('Copy command');

  return (
    <CommandBlock
      commands={['yarn add twenty-ui']}
      actions={
        <Button
          onClick={async () => {
            try {
              await navigator.clipboard.writeText('yarn add twenty-ui');
              setCopyLabel('Copied');
            } catch {
              setCopyLabel('Select and copy the command');
            }
          }}
        >
          {copyLabel}
        </Button>
      }
    />
  );
};
```

Native attributes, event handlers, classes, styles and refs target the outer `div`. Use `render` to compose another root, for example `render={<section aria-label="Installation commands" />}`. `CommandBlockProps` is exported from `twenty-ui/components/data-display`.

When migrating, replace `button` with `actions`.

## Props

<ParamField body="actions" type="ReactNode">
  Content beside the command lines, such as a copy button, link or status.
</ParamField>

<ParamField body="commands" type="readonly string[]" required>
  Command lines to display. The component prefixes each line with > and does not execute commands.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>">
  Allows you to replace the component's HTML element
  with a different tag, or compose it with another component.

  Accepts a `ReactElement` or a function that returns the element to render.
</ParamField>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.