Docs
File List

File List

A File List component displays a list of files with details such as name, size, and progress.

avatar.png

1 MB•45%

resume.pdf

440 kB•Uploading...

Installation

npx shadcn@latest add https://ui-x.junwen-k.dev/r/file-list.json

Usage

import {
  FileList,
  FileListAction,
  FileListActions,
  FileListContent,
  FileListDescription,
  FileListDescriptionSeparator,
  FileListDescriptionText,
  FileListHeader,
  FileListIcon,
  FileListInfo,
  FileListItem,
  FileListName,
  FileListProgress,
  FileListSize,
} from "@/components/ui/file-list"
<FileList>
  <FileListItem>
    <FileListHeader>
      <FileListIcon />
      <FileListInfo>
        <FileListName>avatar.png</FileListName>
        <FileListDescription>
          <FileListSize>{1000000}</FileListSize>
          <FileListDescriptionSeparator />
          <FileListDescriptionText>45%</FileListDescriptionText>
        </FileListDescription>
      </FileListInfo>
      <FileListActions>
        <FileListAction>
          <Trash2 />
          <span className="sr-only">Remove</span>
        </FileListAction>
      </FileListActions>
    </FileListHeader>
    <FileListContent>
      <FileListProgress value={40} />
    </FileListContent>
  </FileListItem>
</FileList>

Examples

Default

avatar.png

1 MB•45%

resume.pdf

440 kB•Uploading...
DropzoneInput Base