Dev Design LibraryOpen the library

React Attachment Components

Dev Design Library indexes 28 React attachment components from 17 open-source UI libraries, with the most coming from ReUI, AI Elements, Fibo, Cojeev UI and ReScript shadcn. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Attachment components belong to the AI group.

Attachmentshadcn/ui · ReactDisplays a file or image attachment with media, metadata, upload state, and actions.
Ai Attachment GridReact Spectrum · React
Single file attachment in an assistant replyReUI · ReactSingle file attachment in an assistant reply
AttachmentsAI Elements · ReactA flexible, composable attachment component for displaying files, images, videos, audio, and source documents.
AI AttachmentKokonut UI · ReactA file dropped into the chat uploads, then the assistant reads it page by page. Page citations in the answer light up…
Attachment UploadbeUI · ReactA mixed attachment workspace with a dropzone, staggered file and image rows, animated upload, success, failure, retry…
Prompt ComposerSpectrum UI · ReactA prompt input with attachments, a model picker, and a stop state.
File ThumbnailFluid Functionalism · ReactRead-only square preview of a File. Images render via object-cover; PDFs render their first page via pdfjs; a spinner…
AttachmentPanel UI · React NativeFile row with upload states, built on Item.
AttachmentHextaUI · ReactFile and image cards for uploads, with progress, states, actions, a full-card trigger and names that keep their…
Prompt Input AttachmentsLocalMode · ReactAttachment surface for the composer: image/file attach via picker, paste, and drag-and-drop with preview thumbnails…
Agent chatCojeev UI · ReactA composable agent conversation with a bounded thread, draft composer, attachments, progress, explicit permissions and…
Prompt Input PatternHalaska UI · React
AttachmentMetal UI · React + SwiftUIA file someone attached, as a small raised plate: type, name, size or an explicit upload receipt; shared glyphs morph…
Aria AttachmentReScript shadcn · ReScript
AttachmentD2Studio UI · ReactA file attachment chip with a preview, name, size and a remove action.
AttachmentFibo · ReactOne added file as a chip or an image thumbnail, with its upload status and buttons to remove or retry.
Ai Attachment ListReact Spectrum · React
Composer tray with removable attachmentsReUI · ReactComposer tray with removable attachments
Prompt InputAI Elements · ReactAllows a user to send a message with file attachments to a large language model. It includes a textarea, file upload…
Input MessageFluid Functionalism · ReactChat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible…
AttachmentCojeev UI · ReactPresents a file name, type, metadata, and nearby actions as a compact attachment row.
Base AttachmentReScript shadcn · ReScript
Chat ComposerFibo · ReactA message box built from parts around one draft, so each chat surface composes its own.
Image thumbnails in a snapping stripReUI · ReactImage thumbnails in a snapping strip
Three sizes carrying three levels of an answerReUI · ReactThree sizes carrying three levels of an answer
Upload queue across all five statesReUI · ReactUpload queue across all five states
File picker that fills an attachment trayReUI · ReactFile picker that fills an attachment tray

Libraries with React attachment components

Related categories