From Magic UI
File Tree
A component used to showcase the folder and file structure of a directory.
MITCommunity tier
Demo from Magic UI, shown with the Fabrials theme.
Installation
Add it by name, once the app knows the Fabrials registry.
npx shadcn@latest add @fabrials/magicui-file-treeOr by address:
https://ui.fabrials.com/r/magicui-file-tree.jsonshadcn copies the source into your app and installs what it needs. Its shadcn primitives come from Fabrials shims, so buttons and panels match the rest of the app.
- button.tsxFabrials shim
- file-tree.tsxnew
- scroll-area.tsxFabrials shim
- @radix-ui/react-accordion MIT
- lucide-react ISC
Origin and license
ui.fabrials.com republishes this component unchanged, with Magic UI's license at the top of every file. The copy was taken on 2026-09-27 and passed the license gate.
magicuidesign/magicuiMagic UI 23K 1.2K- Library
- Magic UI
- License
- MIT, Copyright (c) Magic UI
- Upstream entry
- https://magicui.design/r/file-tree.json
- Source at
- magicuidesign/magicui@d7207e5
- Snapshot
sha256 a4b8c998d7a3d7f4…
Design notes
Where this component departs from the Fabrials design principles. It still works; decide whether it fits your product.
- Literal coloursUses literal colours instead of theme tokens, so it will not follow the Fabrials palette or dark mode on its own.
bg-slate-300 - Reduced motionAnimates without checking reduced motion; people who ask the system for less motion still get it.
animate-accordion-up