Files

Open in

File 1

File 2

File 3

File 4

File 5

Installation

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>

      <FolderContent>
        <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>

            <FolderContent>
              <FileHighlight>
                <File>
                  <FileIcon>
                    <LucideFileIcon />
                  </FileIcon>
                  <FileLabel>File 2</FileLabel>
                </File>
              </FileHighlight>
            </FolderContent>
          </FolderItem>
        </Files>
      </FolderContent>
    </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>

    <FolderContent>
      <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>

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

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

API Reference

Files

Animate UI API Reference - Radix UI Accordion

Prop	Type	Default
`children`	`React.ReactNode`	-
`defaultOpen?`	`string[]`	`[]`
`open?`	`string[]`	-
`onOpenChange?`	`(open: string[]) => void`	-

Folder

Prop	Type	Default
`...props?`	`React.ComponentProps<"div">`	-

FolderIcon

Prop	Type	Default
`closeIcon`	`React.ReactNode`	-
`openIcon`	`React.ReactNode`	-
`...props?`	`React.ComponentProps<"span">`	-

FolderLabel

Prop	Type	Default
`...props?`	`React.ComponentProps<"span">`	-

FileHighlight

Animate UI API Reference - HighlightItem

File

Prop	Type	Default
`...props?`	`React.ComponentProps<"div">`	-

FileIcon

Prop	Type	Default
`...props?`	`React.ComponentProps<"span">`	-

FileLabel

Prop	Type	Default
`...props?`	`React.ComponentProps<"span">`	-

Credits

Radix UI Accordion

Files

Folder 1

Folder 2

On this page