Yami UI

An accessible file upload dropzone and input.

Drag and drop files here

Installation

Add the file upload component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/file-upload.json

Usage

"use client"

import { Upload } from "lucide-react"
import {
  FileUpload,
  FileUploadDropzone,
  FileUploadTrigger,
} from "@/components/ui/file-upload"

<FileUpload accept="image/*" maxFiles={3} className="w-full max-w-md">
  <FileUploadDropzone className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-border px-6 py-8 text-center transition-colors hover:bg-muted/40">
    <Upload className="size-5 text-muted-foreground" />
    <p className="text-sm font-medium">Drag and drop files here</p>
    <p className="text-xs text-muted-foreground">
      or{" "}
      <FileUploadTrigger asChild>
        <button
          type="button"
          className="font-medium text-primary underline underline-offset-2"
        >
          browse
        </button>
      </FileUploadTrigger>
    </p>
  </FileUploadDropzone>
</FileUpload>

Examples

Default

Drag and drop files here

Code

"use client"

import { Upload } from "lucide-react"
import {
  FileUpload,
  FileUploadDropzone,
  FileUploadTrigger,
} from "@/components/ui/file-upload"

<FileUpload accept="image/*" maxFiles={3} className="w-full max-w-md">
  <FileUploadDropzone className="flex flex-col items-center gap-2 rounded-lg border border-dashed border-border px-6 py-8 text-center transition-colors hover:bg-muted/40">
    <Upload className="size-5 text-muted-foreground" />
    <p className="text-sm font-medium">Drag and drop files here</p>
    <p className="text-xs text-muted-foreground">
      or{" "}
      <FileUploadTrigger asChild>
        <button
          type="button"
          className="font-medium text-primary underline underline-offset-2"
        >
          browse
        </button>
      </FileUploadTrigger>
    </p>
  </FileUploadDropzone>
</FileUpload>