Shadcn File Upload for React Radix UI

FileUpload
├── FileUploadDropzone
├── FileUploadItem
│   ├── FileUploadItemDeleteTrigger
│   ├── FileUploadItemGroup
│   ├── FileUploadItemName
│   ├── FileUploadItemPreview
│   │   └── FileUploadItemPreviewImage
│   └── FileUploadItemSize
├── FileUploadLabel
├── FileUploadTrigger
└── FileUploadClearTrigger

import { Button } from "@/components/ui/button";
import {
  FileUpload,
  FileUploadDescription,
  FileUploadDropzone,
  FileUploadDropzoneIcon,
  FileUploadHelper,
  FileUploadList,
  FileUploadTitle,
  FileUploadTrigger,
} from "@/components/ui/file-upload";
import { Separator } from "@/components/ui/separator";

<FileUpload className="mx-auto w-full max-w-xs">
  <FileUploadDropzone>
    <FileUploadDropzoneIcon />
    <FileUploadTitle>Drop files here</FileUploadTitle>
    <div className="flex items-center justify-center gap-2">
      <Separator />
      <FileUploadDescription>or</FileUploadDescription>
      <Separator />
    </div>
    <FileUploadTrigger asChild>
      <Button>Browse files</Button>
    </FileUploadTrigger>
    <FileUploadHelper>
      You can upload up to 2 files at a time.
    </FileUploadHelper>
  </FileUploadDropzone>
  <FileUploadList />
</FileUpload>