Shadcn Attachment

What is Shadcn Attachment?

An attachment is the small card that stands in for a file: an icon or a thumbnail, the file name, one line of metadata, and whatever actions the file allows. Shadcn Attachment splits that into 9 parts, from AttachmentMedia and AttachmentTitle through AttachmentActions to AttachmentGroup, so the same markup holds whether the card is a dense composer chip or a full-width row.

The parts carry the fiddly details. Title and description truncate instead of wrapping, so a long file name cannot push the actions off the row. AttachmentMedia with variant="image" crops a child image square, so thumbnails line up without sizing classes of their own. AttachmentGroup is a scrolling, snapping row with the scrollbar hidden, so the fifth file scrolls into view instead of adding a second line.

Why Use Shadcn Attachment?

Teams hand-roll this card and hit the same 3 problems: the file name wraps and breaks the row, the failure state is a red border with no reason beside it, and a click overlay on the card swallows the remove button. Attachment answers all 3 in the primitive, with truncation on the text parts, a description that stays legible in the error state, and a trigger layered under the actions row so both keep their hit areas.

The 6 components on this page are the parts, not the finished product. The assembled surface is Pro: 9 of the 12 AI Chat blocks import this same Attachment, inside streaming threads, reply details, and composers that hold their own context chips. Copy a chip from this page, or start from a chat surface that already has one.

Shadcn Attachment Features

• 5 Upload States on One Prop. state accepts idle, uploading, processing, error, and done. Idle draws a dashed border, uploading and processing shimmer the title, and error recolors the border, the media, and the description.
• Media Slot for Icons or Images. AttachmentMedia is a square, centered box. Set variant="image" and a child image is cropped to fill it, so a strip of thumbnails lines up without per-image classes.
• Truncating Title and Description. Both text parts truncate at the card width. Long file names and long error messages stay on one line, and the actions keep their place at the end of the row.
• Actions Over a Full-Card Trigger. AttachmentAction renders a Shadcn Button as a ghost icon button by default. AttachmentTrigger covers the card for select or preview and sits under the actions row in the stacking order, so a remove button still receives its click.
• Scrolling, Snapping Group. AttachmentGroup keeps chips on one line, hides the scrollbar, and snaps each card into place, so a composer tray never grows a second row when another file is added.
• 3 Sizes and 2 Orientations. size takes default, sm, and xs, and orientation takes horizontal and vertical. The same markup becomes a dense composer chip or a vertical thumbnail card, with padding and media size set per style.
• Shadcn Create Compatible. All 8 Shadcn Create styles (Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea) carry their own attachment rules, so the card runs from square corners in Lyra to a deep radius in Luma with no markup change.

Wiring Attachment to a Picker and an Upload Queue

Attachment renders state, it does not move bytes. For picking, pair it with the useFileUpload hook from Shadcn File Upload: render a card in the idle state, put openFileDialog on the AttachmentTrigger that covers it, spread getInputProps onto a visually hidden input, and call removeFile from the action on each chip.

For a queue, hold your own rows and map transfer status onto state: uploading while bytes move, processing while the file is scanned or parsed, error with the reason written into AttachmentDescription, done when it lands. Show a Shadcn Spinner inside AttachmentMedia while a file is in flight, and put the percentage in the description or beside the card with Shadcn Progress.