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

---

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-components-base-files" />

Installation

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

Usage

<Files>
  <FolderItem value="app">
    <FolderTrigger>app</FolderTrigger>

    <FolderPanel>
      <SubFiles>
        <FolderItem value="(home)">
          <FolderTrigger>(home)</FolderTrigger>

          <FolderPanel>
            <FileItem>page.tsx</FileItem>
            <FileItem>layout.tsx</FileItem>
          </FolderPanel>
        </FolderItem>

        <FileItem>layout.tsx</FileItem>
        <FileItem>page.tsx</FileItem>
        <FileItem>global.css</FileItem>
      </SubFiles>
    </FolderPanel>
  </FolderItem>

  <FolderItem value="components">
    <FolderTrigger>components</FolderTrigger>

    <FolderPanel>
      <SubFiles>
        <FileItem>button.tsx</FileItem>
        <FileItem>tabs.tsx</FileItem>
        <FileItem>dialog.tsx</FileItem>

        <FolderItem value="empty">
          <FolderTrigger>empty</FolderTrigger>
        </FolderItem>
      </SubFiles>
    </FolderPanel>
  </FolderItem>

  <FileItem>package.json</FileItem>
</Files>

API Reference

Files

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/files#files" text="Animate UI API Reference - Base UI Files" />

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

</div>

<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, }, }} />

FolderItem

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

FolderTrigger

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/files#foldertrigger" text="Animate UI API Reference - Base UI FolderTrigger" />

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

</div>

<TypeTable type={{ gitStatus: { description: 'The git status of the folder.', type: '"untracked" | "modified" | "deleted"', required: false, }, '...props': { description: 'The props of the folder trigger.', type: 'React.ComponentProps<"span">', required: false, }, }} />

FolderPanel

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/files#folderpanel" text="Animate UI API Reference - Base UI FolderPanel" />

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

</div>

FileItem

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

<TypeTable type={{ icon: { description: 'The icon of the file.', type: 'React.ElementType', required: false, default: 'FileIcon', }, gitStatus: { description: 'The git status of the file.', type: '"untracked" | "modified" | "deleted"', required: false, }, '...props': { description: 'The props of the file item.', type: 'React.ComponentProps<"span">', required: false, }, }} />

Credits

• Base UI Accordion

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