fetaUI
GitHub

Attachment Group

A scrolling row of files above a composer. It fades where it overflows.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/attachment-group
Playground
  • Report.pdf2.4 MB
  • Photo.png1.1 MB
  • Budget.csv84 KB
  • Archive.zip84 MB
Overflowing
  • Report.pdf2.4 MB
  • Photo.png1.1 MB
  • Budget.csv84 KB
  • Archive.zip84 MB
Fits
  • Report.pdf2.4 MB
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/attachment-group

Accessibility

  • The row is a named group of list items.
  • The pager has its own label.

Motion

  • Cards scale in from .96 and the rest close the gap on a spring.
  • The pager scrolls one page smoothly.
  • With reduced motion, changes are instant.

Responsive behavior

  • 480 px on Web with a pager. On Mobile it scrolls by touch with no pager.

Performance

  • One ResizeObserver tracks overflow and disconnects on unmount.
  • Rows use Motion layout, which is off when still.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import AttachmentGroup from @/components/fetaui/attachment, and pass items with an id each.
  • Each item takes Attachment props, and the size is always small.
  • Removal is yours: pass onRemove per item and drop it from your list, as the demo does.
  • Set label to name the row for screen readers.
/docs/components/attachment-group/markdown
PreviousBilling Switch
NextInput OTP

Related

AttachmentComponentA file on its way up or already there, with a drop zone and an upload queue.PromptProComponentTwo composers. AI Prompt is the lighter chat composer with commands, files and hints. Prompt Input is the agent composer, where the header names the mode: ask, responding, voice or actions.Icon ButtonComponentThe round sibling of Button, for an action one icon can explain.