

<Preview name="AttachmentsDefaultExample" />

## Overview [#overview]

`Attachments` renders file and source-document references without owning upload, persistence, or message state. Use it anywhere chat UI needs a consistent attachment preview.

## Usage [#usage]

```tsx
import {
  Attachment,
  AttachmentInfo,
  AttachmentPreview,
  AttachmentRemove,
  Attachments,
} from "@tilt-legal/cubitt-components/chat-elements";
```

## Examples [#examples]

### Default [#default]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="AttachmentsDefaultExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Attachments>
      {files.map((file) => (
        <Attachment data={file} key={file.id} onRemove={() => remove(file.id)}>
          <AttachmentPreview />
          <AttachmentRemove />
        </Attachment>
      ))}
    </Attachments>
    ```
  </Tab>
</Tabs>

### Inline [#inline]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="AttachmentsInlineExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Attachments variant="inline">
      {files.map((file) => (
        <Attachment data={file} key={file.id} onRemove={() => remove(file.id)}>
          <AttachmentPreview />
          <AttachmentInfo />
          <AttachmentRemove />
        </Attachment>
      ))}
    </Attachments>
    ```
  </Tab>
</Tabs>

### List [#list]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="AttachmentsListExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Attachments variant="list">
      {files.map((file) => (
        <Attachment data={file} key={file.id} onRemove={() => remove(file.id)}>
          <AttachmentPreview />
          <AttachmentInfo showMediaType />
          <AttachmentRemove />
        </Attachment>
      ))}
    </Attachments>
    ```
  </Tab>
</Tabs>
