Skip to main content

Installation

npx shadcn@latest add @blocks/file-upload-06
This installs the component and required dependency (lucide-react).

Usage

import FileUpload06 from "@/components/file-upload-06"

export default function Page() {
  return <FileUpload06 />
}

Features

This component includes:
  • Organized upload sections (Uploading and Finished)
  • Multiple file upload support
  • Real-time progress tracking per file
  • Visual status indicators (Loader for uploading, CheckCircle for completed)
  • Drag and drop dropzone
  • Click to browse files
  • File type restrictions (JPG, PNG, GIF)
  • Individual file removal on hover
  • Progress bars with percentage display
  • Separated sections with visual dividers
  • Maximum file size information (10 MB)
  • Responsive design with flex layout

Build docs developers (and LLMs) love