How do I install the Vibe UI Uploader component?

You can install Uploader into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add uploader" in your terminal.

Does Vibe UI Uploader support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Uploader component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

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

Prop	Type	Default	Description
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The visual theme preset style of the uploader container and dropzone.
maxSizeMB	number	5	The maximum allowed file size in megabytes.
accept	string[]	undefined	Array of accepted file MIME types or extensions (e.g. ['image/*', '.pdf']).
onFilesSelected	(files: File[]) => void	undefined	Callback function triggered when valid files are chosen or dropped.
onFileRemoved	(fileId: string) => void	undefined	Callback function triggered when a file item is removed from the queue.
files	UploadedFile[]	[]	Optional array of initial files to pre-populate the uploader queue.