File Upload

PreviousNext

A comprehensive file upload component with drag-and-drop support, multiple file types, different sizes, and various states for building file upload interfaces.

Component file-upload-demo not found in registry.

Installation

pnpm dlx shadcn@latest add file-upload

Usage

import * as FileUpload from "@/components/ui/file-upload"
<FileUpload.Root>
  <FileUpload.Trigger>
    <FileUpload.Content>
      <FileUpload.Icon>
        <CloudUpload />
      </FileUpload.Icon>
      <div className="space-y-1">
        <FileUpload.Title>Upload your files</FileUpload.Title>
        <FileUpload.Description>
          Drag and drop your files here or click to browse
        </FileUpload.Description>
      </div>
      <FileUpload.Button>Choose Files</FileUpload.Button>
    </FileUpload.Content>
    <FileUpload.Input />
  </FileUpload.Trigger>
</FileUpload.Root>