Upload
File upload, image upload, avatar upload, drop zones, transfer lists, and progress indicators.
ImageUpload
FileUpload
DropZone
Interactive drop zone with state transitions (idle / hover / active / error). Drag files over to see the visual states.
Default (idle)
Custom icon & label
DragTransferList
Dual-list transfer widget with drag-and-drop and button-click fallbacks. Click an item to select, then use arrows or drag between lists.
Available Roles
- Admin
- Editor
- Viewer
- Moderator
- Contributor
Assigned Roles
- Owner
Upload Progress
Avatar Upload Pattern
John Doe
john@acme.com
UploadButton
Compact button-style file picker — opens the file dialog without a drop zone. Selected files appear in a list below.
UploadQueue
Multi-entry upload queue showing per-file progress with file-type badges and cancel buttons. Select files to see the queue.
UploadProgress
Standalone progress rows with five status states: pending, uploading, done, error, and canceled.
quarterly-report.pdf
Queued
photo-gallery.zip
Uploading… 67%
invoice_2026.xlsx
Upload complete
backup.tar.gz
Network timeout — file too large
old-draft.docx
Canceled
UploadCard
Cards representing completed file uploads with file-type badges, size, status, and optional download/remove actions.
CopyButton
npm install phia_ui
phia_prod_k1x8m2n4p6q9...
mix phia.install Button Card Badge