NextGuide

File trees

Collapsible project layouts with types, icons and copyable plain-text trees.

File trees

Project layout

Preview
NextGuide project
  • my-docs
    • content
      • docs
        • index.mdx
        • getting-started.mdx
    • nextguide.config.json
    • src
      • app
        • docs
          • layout.tsx
          • [[...slug]]
            • page.tsx
import { FileTree } from "nextguide/blocks"

<FileTree title="NextGuide project" items={[{
  name:"my-docs",kind:"folder",children:[
    {name:"content",kind:"folder",children:[{name:"docs",kind:"folder",children:[{name:"index.mdx",kind:"code"},{name:"getting-started.mdx",kind:"code"}]}]},
    {name:"nextguide.config.json",kind:"json"},
    {name:"src",kind:"folder",children:[{name:"app",kind:"folder",children:[{name:"docs",kind:"folder",children:[{name:"layout.tsx",kind:"code"},{name:"[[...slug]]",kind:"folder",children:[{name:"page.tsx",kind:"code"}]}]}]}]}
  ]
}]} />

Nodes accept name, optional kind, detail and nested children. Folders expand with native keyboard-accessible <details> markup.