Composer

Composable message-editor parts for an input, toolbar, attachments, and drag-and-drop feedback.

GitHub

Preview#

Controls

Attachments

Scroll area

Feedback

Drop overlay

Anatomy#

import {
  Checkbox,
  Composer,
  ComposerActions,
  ComposerAttachment,
  ComposerAttachmentBody,
  ComposerAttachmentFile,
  ComposerAttachmentImage,
  ComposerAttachmentMeta,
  ComposerAttachmentRemove,
  ComposerAttachments,
  ComposerAttachmentTitle,
  ComposerAttachmentUploadingOverlay,
  ComposerAttachmentUploadProgressBar,
  ComposerDropOverlay,
  ComposerDropOverlayPrompt,
  ComposerIconButton,
  ComposerInput,
  ComposerMeta,
  ComposerRoot,
  ComposerSubmit,
  ComposerToolbar,
  ComposerToolbarLabel,
  SortableComposerAttachment,
  SortableComposerAttachmentsScroll,
  Spinner,
} from "raft-ui";

<div className="relative">
  <ComposerRoot>
    <ComposerAttachments>
      {/* wrap: SortableComposerAttachments — scroll: SortableComposerAttachmentsScroll */}
      <SortableComposerAttachmentsScroll items={["shot", "notes"]} onReorder={() => {}}>
        <SortableComposerAttachment id="shot" label="screenshot.png">
          <ComposerAttachment>
            <ComposerAttachmentImage />
            <ComposerAttachmentUploadingOverlay>
              <Spinner />
              64%
            </ComposerAttachmentUploadingOverlay>
            <ComposerAttachmentUploadProgressBar value={64} />
            <ComposerAttachmentRemove />
          </ComposerAttachment>
        </SortableComposerAttachment>
        <SortableComposerAttachment id="notes" label="release-notes.pdf">
          <ComposerAttachment>
            <ComposerAttachmentFile>
              <ComposerAttachmentBody>
                <ComposerAttachmentTitle />
                <ComposerAttachmentMeta>18 KB</ComposerAttachmentMeta>
              </ComposerAttachmentBody>
              <ComposerAttachmentUploadingOverlay>
                <Spinner />
                64%
              </ComposerAttachmentUploadingOverlay>
              <ComposerAttachmentUploadProgressBar value={64} />
            </ComposerAttachmentFile>
            <ComposerAttachmentRemove />
          </ComposerAttachment>
        </SortableComposerAttachment>
      </SortableComposerAttachmentsScroll>
    </ComposerAttachments>
    <Composer>
      <ComposerInput />
      <ComposerToolbar>
        <ComposerActions>
          <ComposerIconButton />
        </ComposerActions>
        <ComposerMeta>
          <ComposerToolbarLabel>
            <Checkbox />
            As Task
          </ComposerToolbarLabel>
          <ComposerSubmit />
        </ComposerMeta>
      </ComposerToolbar>
    </Composer>
  </ComposerRoot>
  <ComposerDropOverlay>
    <ComposerDropOverlayPrompt />
  </ComposerDropOverlay>
</div>

Usage#

Default composer#

Pending and failed attachments#

Attachment limit banner#

Attachment count limits are product policy. Keep the Banner outside Composer and show it when the consumer rejects another file.

Attachment limit reached

You can attach up to 10 files per message.

Single-row attachments with arrows#

Use SortableComposerAttachmentsScroll inside ComposerAttachments for a single-row strip (arrows + horizontal reorder). For wrapping tiles, use SortableComposerAttachments instead.

Reorder attachments (wrap)#

Use SortableComposerAttachments with consumer-owned order. Pass string items / onReorder; render each tile inside SortableComposerAttachment.

Reorder attachments (scroll)#

SortableComposerAttachmentsScroll is a thin wrapper around ComposerAttachmentsScrollArea with horizontal sort + x-only autoscroll. Same items / onReorder contract as the wrap variant.

File drop overlay#

API#WIP

ComposerRoot#

Prop	Type	Default	Description
`...props`	form props	—	Composition root for autocomplete, pending attachments, and the bordered composer surface.

Composer#

Prop	Type	Default	Description
`...props`	div props	—	Bordered composer shell.

ComposerInput#

Prop	Type	Default	Description
`...props`	textarea props	—	Auto-growing message textarea.

Prop	Type	Default	Description
`...props`	div props	—	Toolbar row under the input.

ComposerActions#

Prop	Type	Default	Description
`...props`	div props	—	Caller-owned action cluster in the toolbar.

ComposerMeta#

Prop	Type	Default	Description
`...props`	div props	—	Caller-owned metadata cluster in the toolbar.

ComposerIconButton#

Prop	Type	Default	Description
`...props`	button props	—	Attach-action icon button.

ComposerSubmit#

Prop	Type	Default	Description
`...props`	Button props	—	Accent Button used for submit. Use Button size, loading, and render props; pass visible content as children.

Prop	Type	Default	Description
`...props`	label props	—	A labelled checkbox or status cluster with theme-aware spacing and typography.

ComposerAttachments#

Prop	Type	Default	Description
`...props`	div props	—	Pending-upload strip above the input.

ComposerAttachmentsScrollArea#

Prop	Type	Default	Description
`...props`	div props	—	Opt-in single-row overflow with prev/next arrows. Prefer SortableComposerAttachmentsScroll when reorder is needed — that wrapper includes this shell.

SortableComposerAttachments#

Prop	Type	Default	Description
`items`	readonly string[]	—	Ordered attachment ids. Consumer owns the list and maps ids back to tile data.
`onReorder`	(items: string[]) => void	—	Commits the reordered id list on drag end. Live draft order is kept inside the sortable while dragging.
`children`	ReactNode	—	SortableComposerAttachment children for each id in items.

SortableComposerAttachmentsScroll#

Prop	Type	Default	Description
`...props`	SortableComposerAttachments props	—	Thin wrapper: ComposerAttachmentsScrollArea + horizontal sort strategy + x-only autoscroll.

SortableComposerAttachment#

Prop	Type	Default	Description
`id`	string	—	Stable id matching an entry in the parent items list.
`label`	string	—	Accessible name used for the reorder control (e.g. filename).
`children`	ReactNode	—	ComposerAttachment tile content. DragOverlay clones this as the pointer ghost.

ComposerAttachment#

Prop	Type	Default	Description
`...props`	div props	—	Attachment tile within the pending-upload strip.

ComposerAttachmentFile#

Prop	Type	Default	Description
`...props`	span props	—	File-chip tile for non-image uploads.

ComposerAttachmentImage#

Prop	Type	Default	Description
`...props`	span props	—	Fixed 64px image media. Place FilePreview media inside. The attachment root owns the brutal frame border when this part is present.

ComposerAttachmentBody#

Prop	Type	Default	Description
`...props`	span props	—	File-chip text block.

ComposerAttachmentTitle#

Prop	Type	Default	Description
`...props`	span props	—	Attachment filename.

ComposerAttachmentMeta#

Prop	Type	Default	Description
`...props`	span props	—	Attachment mime/type metadata.

ComposerAttachmentUploadingOverlay#

Prop	Type	Default	Description
`...props`	span props	—	White upload overlay for caller-owned progress content. For images, place as a sibling under ComposerAttachment; for files, nest inside ComposerAttachmentFile.

ComposerAttachmentUploadProgressBar#

Prop	Type	Default	Description
`...props`	span props & { value: number }	—	Bottom linear upload progress bar. Place next to the uploading overlay (image: under ComposerAttachment; file: inside ComposerAttachmentFile).

ComposerAttachmentFailedOverlay#

Prop	Type	Default	Description
`...props`	span props	—	Borderless failed-upload mask for caller-owned retry feedback.

ComposerAttachmentRemove#

Prop	Type	Default	Description
`...props`	button props	—	Corner remove affordance.

ComposerDropOverlay#

Prop	Type	Default	Description
`...props`	div props	—	Drag-and-drop overlay that fills its nearest positioned ancestor. May sit inside ComposerRoot or outside it on a shared relative wrapper.

ComposerDropOverlayLabel#

Prop	Type	Default	Description
`...props`	span props	—	Visible drop feedback content.

ComposerDropOverlayPrompt#

Prop	Type	Default	Description
`...props`	span props	—	Default drop feedback prompt; pass children to replace its visible content.