> ## 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` كل أمر مُقدَّم مع علامة موجّه. لا ينفّذ الأوامر ولا يوفّر النسخ تلقائيًا. زوّد `actions` بأي عقدة React، مثل [زر](https://docs.twenty.com/ar/ui/primitives/input/button.md) أو رابط أو حالة. يستخدم نص الأمر دلالات `pre` و`code`، ويحافظ على فواصل الأسطر، ويلتف ضمن العرض المتاح. علامات الموجّه زخرفية.

**Light**

[مثال CommandBlock (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-commandblock--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال CommandBlock (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-commandblock--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-data-display-commandblock--display)

## استخدام

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

تستهدف السمات الأصلية، ومعالجات الأحداث، والفئات، والأنماط، والمراجع عنصر `div` الخارجي. استخدم `render` لتكوين جذر آخر، على سبيل المثال `render={<section aria-label="Installation commands" />}`. يتم تصدير `CommandBlockProps` من `twenty-ui/components/data-display`.

عند الترحيل، استبدل `button` بـ `actions`.

## الخصائص

**actions** `ReactNode`

Content beside the command lines, such as a copy button, link or status.

**commands** `readonly string[]` *required*

Command lines to display. The component prefixes each line with > and does not execute commands.

**render** `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.


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