File Tree

A paper file tree with fixed outer height: open/close animates inside a scrollport so the card and page never reflow. Icons, chevrons, meta, header and five branch animations are all tunable.

Draw

draw a card

$npx shadcn@latest add @clow/file-tree

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

Playground

the tree3 roots

props

showIconsshowChevronsshowMetashowHeader

height

animate

<FileTree />

Examples

basic

the tree3 roots

Props

prop	type	default
showIcons	boolean	true
showChevrons	boolean	true
showMeta	boolean	true
showHeader	boolean	true
height	number	320
animate	collapse \| fade \| slide \| scale \| blur	collapse