> ## 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.

`CommandBlock` displays each supplied command with a prompt marker. It does not execute commands or provide copying automatically. Pass a [Button](/ui/primitives/input/button) as `button` to supply an action.

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

export const InstallCommand = ({ onCopy }: { onCopy: () => void }) => (
  <CommandBlock
    commands={['yarn add twenty-ui']}
    button={<Button onClick={onCopy}>Copy command</Button>}
  />
);
```

The component accepts only `commands` and `button`. Additional native attributes are not forwarded.

## Props

<ParamField body="button" type="ReactElement<unknown, string | JSXElementConstructor<any>>">
  Optional action element beside the command lines, such as a copy button.
</ParamField>

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