← 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