A keyboard-navigable file tree with collapsible folders, git change badges, and change counts rolled up to folders.
import * as React from 'react'
import { FileTree, type FileTreeItem } from '@/components/ui/file-tree'
const items: FileTreeItem[] = [
{ id: 'src', name: 'src', kind: 'folder', expanded: true },
{ id: 'components', name: 'components', kind: 'folder', depth: 1, expanded: true },
{ id: 'prompt-input', name: 'prompt-input.tsx', kind: 'file', depth: 2, status: 'modified' },
{ id: 'artifact', name: 'artifact.tsx', kind: 'file', depth: 2, status: 'added' },
{ id: 'message', name: 'message.tsx', kind: 'file', depth: 2 },
{ id: 'hooks', name: 'hooks', kind: 'folder', depth: 1 },
{ id: 'use-stream', name: 'use-stream.ts', kind: 'file', depth: 2, status: 'modified' },
{ id: 'use-legacy-chat', name: 'use-legacy-chat.ts', kind: 'file', depth: 2, status: 'deleted' },
{ id: 'routes', name: 'routes', kind: 'folder', depth: 1 },
{ id: 'index-route', name: 'index.tsx', kind: 'file', depth: 2 },
{ id: 'package', name: 'package.json', kind: 'file', status: 'modified' },
{ id: 'readme', name: 'README.md', kind: 'file' },
]
export default function Demo() {
const [selected, setSelected] = React.useState('artifact')
return (
<FileTree
className="w-full max-w-sm"
items={items}
onSelect={setSelected}
selectedId={selected}
title="Repository"
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.