---
description: Display a file and directory tree structure.
title: File tree
image: https://developers.cloudflare.com/style-guide/build-the-page/components/file-tree/og.png?v=4eaacb89925e8879
---
[Skip to content](#main-content)
> Documentation Index
> Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt
> Use this file to discover all available pages before exploring further.
# File tree
Last updated Aug 20, 2026|Copy as Markdown| [View as Markdown](https://developers.cloudflare.com/style-guide/build-the-page/components/file-tree/index.md)| [Agent setup](https://developers.cloudflare.com/agent-setup/)
The `FileTree` component is used `33` times on `24` pages.
See all examples of pages that use FileTree
Used **33** times.
**Pages**
- /agents/runtime/operations/configuration/-Source
- /ai-search/api/migration/autorag-filter-format/-Source
- /ai-search/configuration/retrieval/filtering/-Source
- /ai-search/how-to/per-tenant-search/-Source
- /basin-catalog/config-examples/spark-scala/-Source
- /basin-catalog/deleting-data/-Source
- /cf/get-started/first-worker/-Source
- /d1/get-started/-Source
- /d1/tutorials/d1-and-prisma-orm/-Source
- /kv/get-started/-Source
- /pages/functions/routing/-Source
- /r2/data-migration/migration-strategies/-Source
- /r2/platform/troubleshooting/-Source
- /sandbox/get-started/build-a-coding-agent-runner/-Source
- /style-guide/build-the-page/frontmatter/sidebar/-Source
- /workers/ci-cd/builds/advanced-setups/-Source
- /workers/framework-guides/web-apps/more-web-frameworks/hono/-Source
- /workers/framework-guides/web-apps/react-router/-Source
- /workers/framework-guides/web-apps/react/-Source
- /workers/framework-guides/web-apps/vue/-Source
- /workers/observability/source-maps/-Source
- /workers/static-assets/routing/advanced/html-handling/-Source
- /workers/static-assets/routing/advanced/serving-a-subdirectory/-Source
- /workers/wrangler/configuration/-Source
**Partials**
File tree is a built-in component provided by [Nimbus ↗︎](https://nimbus-docs.com/components/file-tree/).
```mdx
import { FileTree } from "~/components"
- src
- docs
- style-guide
- components
- **file-tree.mdx**
```
Was this helpful?
YesNo
## On this page
[Docs](https://developers.cloudflare.com/)
```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/build-the-page/components/file-tree/#page","headline":"File tree","description":"Display a file and directory tree structure.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/file-tree/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/file-tree/og.png?v=4eaacb89925e8879","dateModified":"2026-08-20","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```