Yami UI

Composable file list items — pair with Dropzone and useFileList.

Drop files here, or browse

Any file up to 10 MB

Installation

Add the file list component with the shadcn CLI.

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

Usage

"use client"

import { Dropzone } from "@/components/ui/dropzone"
import {
  FileItem, FileItemDelete, FileItemMetadata,
  FileItemPreview, FileItemProgress,
  FileList, FileListClear, useFileList,
} from "@/components/ui/file-list"

function MyUploader() {
  const { files, addFiles, removeFile, clearFiles } = useFileList({
    maxFiles: 5,
    accept: "image/*",
  })

  return (
    <div className="flex flex-col gap-3">
      <Dropzone onDrop={addFiles} accept="image/*" multiple />
      {files.length > 0 && (
        <FileList>
          {files.map((f) => (
            <FileItem key={f.id} fileState={f}>
              <FileItemPreview />
              <FileItemMetadata />
              <FileItemProgress />
              <FileItemDelete onDelete={() => removeFile(f.id)} />
            </FileItem>
          ))}
        </FileList>
      )}
      {files.length > 1 && (
        <FileListClear onClear={clearFiles}>Clear all</FileListClear>
      )}
    </div>
  )
}

Examples

With Dropzone

Compose Dropzone + FileList with useFileList hook

Drop files here, or browse

Any file up to 10 MB

Code

"use client"

import { Dropzone } from "@/components/ui/dropzone"
import {
  FileItem, FileItemDelete, FileItemMetadata,
  FileItemPreview, FileItemProgress,
  FileList, FileListClear, useFileList,
} from "@/components/ui/file-list"

function MyUploader() {
  const { files, addFiles, removeFile, clearFiles } = useFileList({ maxFiles: 5 })

  return (
    <div className="flex flex-col gap-3">
      <Dropzone onDrop={addFiles} multiple />
      {files.length > 0 && (
        <>
          <FileList>
            {files.map((f) => (
              <FileItem key={f.id} fileState={f}>
                <FileItemPreview />
                <FileItemMetadata />
                <FileItemProgress />
                <FileItemDelete onDelete={() => removeFile(f.id)} />
              </FileItem>
            ))}
          </FileList>
          <FileListClear onClear={clearFiles}>Clear all</FileListClear>
        </>
      )}
    </div>
  )
}