A compact repository tree with selection, nesting, expansion, and change status.
import FileTree from '@/components/ui/file-tree'
export default function Demo() {
return (
<FileTree
className="w-full max-w-sm"
items={[
{ 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: 'routes', name: 'routes', kind: 'folder', depth: 1 },
{ id: 'package', name: 'package.json', kind: 'file', status: 'modified' },
{ id: 'readme', name: 'README.md', kind: 'file' },
]}
selectedId="artifact"
title="Repository"
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.