Files
A component that allows you to display a list of files and folders.
Powered by
Base UI
Animate UI
Motion
LucideInstallation
npx shadcn@latest add @redpanda/filespnpm dlx shadcn@latest add @redpanda/filesyarn dlx shadcn@latest add @redpanda/filesbunx shadcn@latest add @redpanda/filesnubx shadcn@latest add @redpanda/filesaube dlx shadcn@latest add @redpanda/filesWhen to use
Use this decision tree to determine when to use the Files component:
Usage
Files presents nested folder disclosures, not an ARIA tree widget. Tab moves between folder buttons; Enter or Space expands or collapses the focused folder. File leaves are passive display rows. Expanding one folder does not close its siblings.
Files.open controls its immediate child folders. A Folder’s open controls that folder’s immediate child folders, using their names as IDs. Use defaultOpen for uncontrolled groups. Folder names must be unique within each group.
<Files> <Folder name="Folder 1"> <File name="file1.txt" /> <File name="file2.txt" /> </Folder> <Folder name="Folder 2"> <File name="file3.txt" /> <File name="file4.txt" /> </Folder></Files>Use status="modified" or status="untracked" for Git status. The owner supplies the text tone and indicator: a folder dot or a file’s M/U marker. Status is also available as text to assistive technology; folder buttons expose it as their description. A custom sideComponent replaces the visual indicator without removing the status description. Keep folder side content non-interactive because the folder row is already a button.
Folders own their disclosure element and content. Customize their displayed children and sideComponent, not a replacement render host. Disclosure layout changes immediately; folder icons and the moving row-hover highlight retain their animation. Keyboard focus has its own visible ring and does not depend on pointer hover.
Examples
Files Advanced
Props
Files
childrenReact.ReactNode
The children of the component.
React.ReactNodeclassName?string
The class name of the component.
stringactiveClassName?string
The class name of the highlight.
stringdefaultOpen?string[]
The child folders open by default.
string[]open?string[]
The child folders open.
string[]onOpenChange?function
The callback function when the child folders open change.
functionsideComponent?React.ReactNode
The component to display on the right side of the component.
React.ReactNodeFolder
namestring
The name of the folder.
stringstatus?'modified' | 'untracked'
Git status with an owned text tone, visual indicator and accessible description.
'modified' | 'untracked'children?React.ReactNode
The children of the component.
React.ReactNodeclassName?string
The class name of the component.
stringdefaultOpen?string[]
The child folders open by default.
string[]open?string[]
The child folders open.
string[]onOpenChange?function
The callback function when the child folders open change.
functionFile
className?string
The class name of the component.
stringnamestring
The name of the file.
stringstatus?'modified' | 'untracked'
Git status with an owned text tone, M/U marker and readable status text.
'modified' | 'untracked'Credits
- We use Animate UI from imskyleen for all the animations.