Tailwind CSS File Tree Components

Dev Design Library indexes 17 Tailwind CSS file tree components from 14 open-source UI libraries, with the most coming from beUI, FLX UI, uselayouts, Magic UI and AI Elements. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. File tree components belong to the Data display group.

• Sidebar 11shadcn/ui · ReactA sidebar with a collapsible file tree.
• File TreeMagic UI · ReactA component used to showcase the folder and file structure of a directory.
• File TreeAI Elements · ReactDisplay hierarchical file and folder structure with expand/collapse functionality.
• Card FolderbeUI · ReactA landscape card tucked into a stitched purse pocket that lifts forward as the purse compresses into its bottom seam…
• Folder PreviewVengeance UI · ReactFolder stack visual preview
• Scroll Area 01 - Custom File ExplorerShadcn Space · ReactA scrollable file explorer list with custom icons, badges, and smooth scroll area performance.
• Folder Interactionuselayouts · ReactA folder management system with drag-and-drop-like feel.
• File TreeAnimations (Svelte) · SvelteAn interactive file tree component with expandable folders, selectable files, and smooth animations.
• Tree ViewShark UI · ReactHierarchical data in a tree structure.
• FilesWatermelon UI · React
• TreeHextaUI · ReactNested, expandable rows for files and hierarchies, with indent guides, connector lines, cascading checkboxes…
• File treeFLX UI · ReactNested folders built from collapsible rows, with folder icons that swap on open.
• File TreeVelora UI · ReactCollapsible tree for documenting project structure.
• Tree Viewark-cn · ReactA shadcn-style tree view component built with Ark UI primitives.
• File TreebeUI · ReactComposable file and folder primitives with springing branches, a gliding selection, and complete keyboard navigation.
• File listFLX UI · ReactFile icon, name, size metadata, and a trailing overflow menu with actions per row.
• Project FolderbeUI · ReactAn interactive project folder that opens its file fan on hover or focus, expands into a focus-managed overlay, then…

Libraries with Tailwind CSS file tree components

• beUI
• FLX UI
• uselayouts
• Magic UI
• AI Elements

Related categories

• File Tree Components
• React File Tree Components
• Animated File Tree Components
• shadcn/ui File Tree Components
• Tailwind CSS Data Display Components
• Tailwind CSS Card Components
• Tailwind CSS Chart Components
• Tailwind CSS Table Components
• Tailwind CSS Avatar Components
• Tailwind CSS Stat Components
• Tailwind CSS List Components
• Tailwind CSS Calendar Components
• Tailwind CSS Accordion Components
• Tailwind CSS Data Table Components
• Tailwind CSS Carousel Components
• Tailwind CSS Collapsible Components
• Tailwind CSS Avatar Group Components
• Tailwind CSS Stat Card Components
• Tailwind CSS Bar Chart Components
• Tailwind CSS Tree View Components