║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Files description: A component that allows you to display a list of files and folders. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-07

<ComponentPreview name="demo-primitives-base-files" />

Installation

<ComponentInstallation name="primitives-base-files" />

Usage

With Highlight

<Files>
  <FilesHighlight>
    <FolderItem value="folder-1">
      <FolderHeader>
        <FolderTrigger>
          <FolderHighlight>
            <Folder>
              <FolderIcon
                closeIcon={<LucideFolderIcon />}
                openIcon={<LucideFolderOpenIcon />}
              />
              <FileLabel>Folder 1</FileLabel>
            </Folder>
          </FolderHighlight>
        </FolderTrigger>
      </FolderHeader>

      <FolderPanel>
        <FileHighlight>
          <File>
            <FileIcon>
              <LucideFileIcon />
            </FileIcon>
            <FileLabel>File 1</FileLabel>
          </File>
        </FileHighlight>

        <Files>
          <FolderItem value="folder-2">
            <FolderHeader>
              <FolderTrigger>
                <FolderHighlight>
                  <Folder>
                    <FolderIcon
                      closeIcon={<LucideFolderIcon />}
                      openIcon={<LucideFolderOpenIcon />}
                    />
                    <FileLabel>Folder 2</FileLabel>
                  </Folder>
                </FolderHighlight>
              </FolderTrigger>
            </FolderHeader>

            <FolderPanel>
              <FileHighlight>
                <File>
                  <FileIcon>
                    <LucideFileIcon />
                  </FileIcon>
                  <FileLabel>File 2</FileLabel>
                </File>
              </FileHighlight>
            </FolderPanel>
          </FolderItem>
        </Files>
      </FolderPanel>
    </FolderItem>

    <FileHighlight>
      <File>
        <FileIcon>
          <LucideFileIcon />
        </FileIcon>
        <FileLabel>File 3</FileLabel>
      </File>
    </FileHighlight>
  </FilesHighlight>
</Files>

Without Highlight

<Files>
  <FolderItem value="folder-1">
    <FolderHeader>
      <FolderTrigger>
        <Folder>
          <FolderIcon
            closeIcon={<LucideFolderIcon />}
            openIcon={<LucideFolderOpenIcon />}
          />
          <FileLabel>Folder 1</FileLabel>
        </Folder>
      </FolderTrigger>
    </FolderHeader>

    <FolderPanel>
      <File>
        <FileIcon>
          <LucideFileIcon />
        </FileIcon>
        <FileLabel>File 1</FileLabel>
      </File>

      <Files>
        <FolderItem value="folder-2">
          <FolderHeader>
            <FolderTrigger>
              <Folder>
                <FolderIcon
                  closeIcon={<LucideFolderIcon />}
                  openIcon={<LucideFolderOpenIcon />}
                />
                <FileLabel>Folder 2</FileLabel>
              </Folder>
            </FolderTrigger>
          </FolderHeader>

          <FolderPanel>
            <File>
              <FileIcon>
                <LucideFileIcon />
              </FileIcon>
              <FileLabel>File 2</FileLabel>
            </File>
          </FolderPanel>
        </FolderItem>
      </Files>
    </FolderPanel>
  </FolderItem>

  <File>
    <FileIcon>
      <LucideFileIcon />
    </FileIcon>
    <FileLabel>File 3</FileLabel>
  </File>
</Files>

API Reference

Files

<ExternalLink href="https://animate-ui.com/docs/primitives/base/accordion#accordion" text="Animate UI API Reference - Base UI Accordion" />

<TypeTable type={{ children: { description: 'The child folders and files.', type: 'React.ReactNode', required: true, }, defaultOpen: { description: 'The child folders open by default.', type: 'string[]', required: false, default: '[]', }, open: { description: 'The child folders open.', type: 'string[]', required: false, }, onOpenChange: { description: 'The callback function when the child folders open changes.', type: '(open: string[]) => void', required: false, }, }} />

FilesHighlight

<ExternalLink href="https://animate-ui.com/docs/primitives/effects/highlight#highlight" text="Animate UI API Reference - Highlight" />

FolderItem

<ExternalLink href="https://animate-ui.com/docs/primitives/base/accordion#accordionitem" text="Animate UI API Reference - Base UI AccordionItem" />

FolderHeader

<ExternalLink href="https://animate-ui.com/docs/primitives/base/accordion#accordionheader" text="Animate UI API Reference - Base UI AccordionHeader" />

FolderTrigger

<ExternalLink href="https://animate-ui.com/docs/primitives/base/accordion#accordiontrigger" text="Animate UI API Reference - Base UI AccordionTrigger" />

FolderPanel

<ExternalLink href="https://animate-ui.com/docs/primitives/base/accordion#accordionpanel" text="Animate UI API Reference - Base UI AccordionPanel" />

FolderHighlight

<ExternalLink href="https://animate-ui.com/docs/primitives/effects/highlight#highlightitem" text="Animate UI API Reference - HighlightItem" />

Folder

<TypeTable type={{ '...props': { description: 'The props of the folder.', type: 'React.ComponentProps<"div">', required: false, }, }} />

FolderIcon

<TypeTable type={{ closeIcon: { description: 'The icon of the closed folder.', type: 'React.ReactNode', required: true, }, openIcon: { description: 'The icon of the open folder.', type: 'React.ReactNode', required: true, }, '...props': { description: 'The props of the folder icon.', type: 'React.ComponentProps<"span">', required: false, }, }} />

FolderLabel

<TypeTable type={{ '...props': { description: 'The props of the folder label.', type: 'React.ComponentProps<"span">', required: false, }, }} />

FileHighlight

<ExternalLink href="https://animate-ui.com/docs/primitives/effects/highlight#highlightitem" text="Animate UI API Reference - HighlightItem" />

File

<TypeTable type={{ '...props': { description: 'The props of the file.', type: 'React.ComponentProps<"div">', required: false, }, }} />

FileIcon

<TypeTable type={{ '...props': { description: 'The props of the file icon.', type: 'React.ComponentProps<"span">', required: false, }, }} />

FileLabel

<TypeTable type={{ '...props': { description: 'The props of the file label.', type: 'React.ComponentProps<"span">', required: false, }, }} />

Credits

• Base UI Accordion

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║