CommandBlock

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>
      }
    />
  );
};