Locara
← All components AI affordances

AttachmentChip

File/image/audio/code/video pill shown above the composer. Icon + name + size, remove button, optional progress bar.

Inspired by Claude attachment chips, ChatGPT attachment pills.

Preview

What it looks like.

Usage

Drop it into your app.

import { AttachmentChip } from '@locara/components'

<AttachmentChip name="design-system.pdf" kind="pdf" sizeLabel="2.1 MB" onRemove={onRemove} />
<AttachmentChip name="screenshot.png" kind="image" sizeLabel="340 KB" progress={0.7} />
<AttachmentChip name="main.tsx" kind="code" error="Too large" />

Or copy the source into your repo: locara add attachment-chip