File Upload
A comprehensive file upload component with drag & drop, validation, and progress tracking.
Validation
Validates file type (images only), max files (2), and max size (2MB).
Drag & drop files here
Or click to browse (max 2 files)
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/file-upload.jsonDirect Upload with Progress
Simulates chunked upload progress.
Drag & drop files here
Or click to browse
Circular Progress
Uses the circular variant for the progress indicator.
Drag & drop files here
Or click to browse
Fill Progress
Uses the fill variant which overlays the preview.
Drag & drop files here
Or click to browse
UploadThing Integration
Demo of how it would look with UploadThing (simulated).
Drag & drop files here
Or click to browse
Chat Input Integration
Complex composition with a textarea and overlay dropzone.
Drag & drop files here
Form Integration
Simple form validation without external libraries.