DocumentationDocumentationShowcaseShowcaseAboutAbout
GitHubGitHub (opens in a new tab)
  • Introduction
  • Guide
    • Organize Files
    • Markdown
    • Syntax Highlighting
    • Next.js Link
    • Next.js Image
    • Next.js SSG
    • Next.js I18n
    • Custom CSS
    • Advanced
      • Npm2Yarn
      • Mermaid
      • Tailwind CSS
      • LaTeX
      • Rendering Tables
      • TypeScript
      • Remote Content
    • Built-ins
      • Callout
      • Tabs
      • Cards
      • Steps
      • FileTree
  • Themes
  • Docs Theme
    • Get Started
    • Page Configuration
    • Theme Configuration
    • Built-ins
      • Bleed
  • Blog Theme
    • Get Started
  • Custom Theme
  • More
  • About Nextra
  • Next.js Docs ↗ (opens in a new tab)
    • Introduction
    • Guide
      • Organize Files
      • Markdown
      • Syntax Highlighting
      • Next.js Link
      • Next.js Image
      • Next.js SSG
      • Next.js I18n
      • Custom CSS
      • Advanced
        • Npm2Yarn
        • Mermaid
        • Tailwind CSS
        • LaTeX
        • Rendering Tables
        • TypeScript
        • Remote Content
      • Built-ins
        • Callout
        • Tabs
        • Cards
        • Steps
        • FileTree
          • Example
          • Usage
    • Themes
    • Docs Theme
      • Get Started
      • Page Configuration
      • Theme Configuration
      • Built-ins
        • Bleed
    • Blog Theme
      • Get Started
    • Custom Theme
    • More
    • About Nextra
    • Next.js Docs ↗ (opens in a new tab)
  • Showcase
  • About

On This Page

  • Example
  • Usage
Question? Give us feedback → (opens in a new tab)Edit this page on GitHub →
Documentation
Guide
Built-ins
FileTree

File Tree Component

Example

    • _meta.json
    • contact.md
    • index.mdx
  • Usage

    Markdown
    import { FileTree } from 'nextra/components'
     
    <FileTree>
      <FileTree.Folder name="pages" defaultOpen>
        <FileTree.File name="_meta.json" />
        <FileTree.File name="contact.md" />
        <FileTree.File name="index.mdx" />
        <FileTree.Folder name="about">
          <FileTree.File name="_meta.json" />
          <FileTree.File name="legal.md" />
          <FileTree.File name="index.mdx" />
        </FileTree.Folder>
      </FileTree.Folder>
    </FileTree>
    StepsDocs Theme

    Powered byVercel

    © 2023 The Nextra Project.