Animate UI

Files

A component that allows you to display a list of files and folders.

Made by imskyleen
Edit on GitHub

page.tsx
U
layout.tsx
U
layout.tsx
page.tsx
M
global.css

package.json

Installation

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

PropTypeDefault
children
React.ReactNode
-
defaultOpen?
string[]
[]
open?
string[]
-
onOpenChange?
(open: string[]) => void
-

FolderItem

Animate UI API Reference - Base UI FolderItem

FolderTrigger

PropTypeDefault
gitStatus?
"untracked" | "modified" | "deleted"
-
...props?
React.ComponentProps<"span">
-

FolderPanel

FileItem

Animate UI API Reference - Base UI FileItem
PropTypeDefault
icon?
React.ElementType
FileIcon
gitStatus?
"untracked" | "modified" | "deleted"
-
...props?
React.ComponentProps<"span">
-

Credits

Built by Skyleen. The source code is available on GitHub.