Install

bunx shadcn@latest add https://idecn.vercel.app/r/idecn.json

bun add idecn

FileTree

<FileTree
  data={tree}
  expandDepth={2}
  onSelectChange={item => console.log(item?.path)}
/>

| Prop | Type | Default | | ----------------------- | -------------------------------- | ------- | | data | TreeDataItem \| TreeDataItem[] | - | | expandDepth | number | 0 | | onSelectChange | (item \| undefined) => void | - | | initialSelectedItemId | string | - | | className | string | - |

interface TreeDataItem {
  id: string
  name: string
  path: string
  children?: TreeDataItem[]
}

Workspace

<Workspace
  tree={tree}
  onOpenFile={item => fetch(`/api/files/${item.path}`).then(r => r.text())}
/>

const ref = useRef<WorkspaceRef>(null)

<Workspace onOpenFile={...} ref={ref}>
  <MyNavigation onSelect={item => ref.current?.openFile(item)} />
</Workspace>

| Prop | Type | Default | | ----------------- | ------------------------------------------ | --------------------------- | | tree | TreeDataItem[] | - | | onOpenFile | (item) => string \| null \| Promise<...> | - | | expandDepth | number | 0 | | expandExclude | string[] | - | | sidebarSize | string \| number | '16%' | | sidebarPosition | 'left' \| 'right' | 'left' | | sidebar | boolean | - | | defaultSidebar | boolean | true | | onSidebarChange | (visible: boolean) => void | - | | editorOptions | Record<string, unknown> | - | | theme | string \| { dark, light } | monokai-lite / github-light | | initialFiles | string[] | - | | files | VirtualFile[] | - | | onFilesChange | (files: string[]) => void | - | | onTabChange | (id: string) => void | - | | activityLog | (line: string) => void | - | | shortcuts | boolean | true | | renderLoading | (item) => ReactNode | - | | ref | Ref<WorkspaceRef> | - |

VirtualFile

interface VirtualFile {
  content: string
  name: string
  language?: string
  icon?: ComponentType<{ className?: string }>
  open?: boolean
  pin?: 'top' | 'bottom'
}

WorkspaceRef

openFile(item) focusPanel(id) toggleSidebar() (Cmd+B / Ctrl+B)

Tab

| Prop | Type | Default | | ------------------- | ------------ | -------- | | title | string | required | | closable | boolean | true | | icon | boolean | true | | headerClassName | string | - | | activeClassName | string | - | | inactiveClassName | string | - | | onClose | () => void | - |

Icons

<FileIcon name="index.ts" className="size-4" />
<FolderIcon name="src" className="size-4" />

Credit

• shadcn-tree-view
• dockview
• material-icon-theme
• Monokai Lite
• shiki