fetaUI
GitHub

Attachment

A file on its way up or already there, with a drop zone and an upload queue.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/attachment
Playground
Report.pdfUploading, 64%
Drop files herePNG, PDF or ZIP, up to 20 MB
    States
    ready.pdf2.4 MB
    uploading.pdfUploading, 64%
    processing.pdfProcessing
    error.pdfUpload failed
    uploaded.pdfUploaded
    Sizes
    Default.pngUploading, 64%
    Small.zipUploading, 64%
    XSmall.csv
    Vertical
    Report.pdf2.4 MB
    Photo.pngUploading, 64%
    Clip.mp4Upload failed
    File types
    Sample file
    Sample image
    Sample pdf
    Sample archive
    Sample sheet
    Sample code
    Sample video
    Sample audio
    Status
    Icons animation
    Motion

    Installation

    Terminal· bash
     npx shadcn add @fetaui/attachment

    Sizes

    Default and small for queues. Extra small drops the status line.

    Default.pngUploading, 64%
    Small.zipUploading, 64%
    XSmall.csv
    Status
    Motion

    Accessibility

    • Actions name the file they act on.
    • Status is live, and the bar is a progressbar.
    • Browse is the keyboard path to the drop zone.

    Motion

    • Rows grow in on a spring and fold away when removed.
    • The tick badge pops on Uploaded, and Error shakes once.
    • Processing sweeps a bar on a 1200 ms loop.
    • With reduced motion, rows appear and the bar holds still.

    Responsive behavior

    • 320 px cards on Web and full width on Mobile.

    Performance

    • Upload rows mount and fold on springs, and exit with no animation when still.
    • The spinner and progress bar keep moving with reduced motion, because they are status.
    • Update progress at a modest rate. Each change re-renders the row.

    Note for AI

    Give your coding assistant the Markdown reference instead of screenshots.

    • Import Attachment and FileUpload from @/components/fetaui/attachment. It composes Button and IconButton.
    • FileUpload only reports files through onFiles. You upload them and pass items back with status and progress.
    • accept is a convenience. Check file type and size on the server. hint is plain text and enforces nothing.
    • onRetry shows in the error state only, and onMore in uploaded only. The demo's queue is a timer.
    /docs/components/attachment/markdown
    PreviousAmount Pad
    NextDetent Dial

    Related

    Attachment GroupComponentA scrolling row of files above a composer. It fades where it overflows.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.Icon ButtonComponentThe round sibling of Button, for an action one icon can explain.Avatar UploadComponentA profile photo with drop, progress, replace and clear errors, or a sample face.