Dev Design LibraryOpen the library

Attachment Components

Dev Design Library indexes 31 attachment components from 20 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. 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.
Prompt InputAI Elements (Svelte) · SvelteA composable prompt input surface with attachments, action menus, and provider-driven text handling.
Attachment TraySwiftPieces · SwiftUIAn attachment strip for composers: a glass add tile opens the photo picker and each pick lands as a tile with a live…
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
Message Composer With Attachmentssv-particles · Svelte
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 attachment components

Related categories