Vibe UI
Initializing Vibe UI System...

Uploader

A premium stateful dropzone component supporting drag-and-drop file inputs, file size and type validations, dynamic uploads list with progress indicator gauges, and 4 design preset themes.

Uploader

A premium stateful dropzone component supporting drag-and-drop file inputs, file size and type validations, dynamic uploads list with progress indicator gauges, and 4 design preset themes.

Preview

Drag & drop files here, or browse

Supports image, PDF or files up to 5MB

Installation

pnpm dlx vibe-ui-kit@latest add uploader button progress badge
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button, progress, badge

Variations

Vibe UI's Uploader component supports multiple visual style presets to match your application's theme:

Drag & drop files here, or browse

Supports image, PDF or files up to 5MB

Drag & drop files here, or browse

Supports image, PDF or files up to 5MB

Drag & drop files here, or browse

Supports image, PDF or files up to 5MB

Drag & drop files here, or browse

Supports image, PDF or files up to 5MB

Props

PropTypeDefaultDescription
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'The visual theme preset style of the uploader container and dropzone.
maxSizeMBnumber5The maximum allowed file size in megabytes.
acceptstring[]undefinedArray of accepted file MIME types or extensions (e.g. ['image/*', '.pdf']).
onFilesSelected(files: File[]) => voidundefinedCallback function triggered when valid files are chosen or dropped.
onFileRemoved(fileId: string) => voidundefinedCallback function triggered when a file item is removed from the queue.
filesUploadedFile[][]Optional array of initial files to pre-populate the uploader queue.

Contributors

Theme Customizer

8px
@theme { --radius: 0.5rem; --glass-blur: 8px; }
Changes apply instantly to this documentation workspace.