---
title: File tree
description: Display a file and directory tree structure.
image: https://developers.cloudflare.com/cf-twitter-card.png
---

> 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.

[Skip to content](#%5Ftop) 

# File tree

The `FileTree` component is used `30` times on `22` pages.

See all examples of pages that use FileTree

Used **30** times.

**Pages**

* [/agents/api-reference/configuration/](https://developers.cloudflare.com/agents/api-reference/configuration/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/agents/api-reference/configuration.mdx)
* [/ai-search/api/migration/autorag-filter-format/](https://developers.cloudflare.com/ai-search/api/migration/autorag-filter-format/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-search/api/migration/autorag-filter-format.mdx)
* [/ai-search/configuration/indexing/metadata/](https://developers.cloudflare.com/ai-search/configuration/indexing/metadata/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-search/configuration/indexing/metadata.mdx)
* [/ai-search/how-to/per-tenant-search/](https://developers.cloudflare.com/ai-search/how-to/per-tenant-search/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-search/how-to/per-tenant-search.mdx)
* [/d1/get-started/](https://developers.cloudflare.com/d1/get-started/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/d1/get-started.mdx)
* [/d1/tutorials/d1-and-prisma-orm/](https://developers.cloudflare.com/d1/tutorials/d1-and-prisma-orm/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/d1/tutorials/d1-and-prisma-orm.mdx)
* [/kv/get-started/](https://developers.cloudflare.com/kv/get-started/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/kv/get-started.mdx)
* [/pages/functions/routing/](https://developers.cloudflare.com/pages/functions/routing/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pages/functions/routing.mdx)
* [/r2/data-catalog/config-examples/spark-scala/](https://developers.cloudflare.com/r2/data-catalog/config-examples/spark-scala/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/r2/data-catalog/config-examples/spark-scala.mdx)
* [/r2/data-catalog/deleting-data/](https://developers.cloudflare.com/r2/data-catalog/deleting-data/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/r2/data-catalog/deleting-data.mdx)
* [/r2/data-migration/migration-strategies/](https://developers.cloudflare.com/r2/data-migration/migration-strategies/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/r2/data-migration/migration-strategies.mdx)
* [/r2/platform/troubleshooting/](https://developers.cloudflare.com/r2/platform/troubleshooting/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/r2/platform/troubleshooting.mdx)
* [/style-guide/frontmatter/sidebar/](https://developers.cloudflare.com/style-guide/frontmatter/sidebar/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/style-guide/frontmatter/sidebar.mdx)
* [/workers/ci-cd/builds/advanced-setups/](https://developers.cloudflare.com/workers/ci-cd/builds/advanced-setups/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/ci-cd/builds/advanced-setups.mdx)
* [/workers/framework-guides/web-apps/more-web-frameworks/hono/](https://developers.cloudflare.com/workers/framework-guides/web-apps/more-web-frameworks/hono/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/framework-guides/web-apps/more-web-frameworks/hono.mdx)
* [/workers/framework-guides/web-apps/react-router/](https://developers.cloudflare.com/workers/framework-guides/web-apps/react-router/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/framework-guides/web-apps/react-router.mdx)
* [/workers/framework-guides/web-apps/react/](https://developers.cloudflare.com/workers/framework-guides/web-apps/react/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/framework-guides/web-apps/react.mdx)
* [/workers/framework-guides/web-apps/vue/](https://developers.cloudflare.com/workers/framework-guides/web-apps/vue/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/framework-guides/web-apps/vue.mdx)
* [/workers/observability/source-maps/](https://developers.cloudflare.com/workers/observability/source-maps/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/observability/source-maps.mdx)
* [/workers/static-assets/routing/advanced/html-handling/](https://developers.cloudflare.com/workers/static-assets/routing/advanced/html-handling/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/static-assets/routing/advanced/html-handling.mdx)
* [/workers/static-assets/routing/advanced/serving-a-subdirectory/](https://developers.cloudflare.com/workers/static-assets/routing/advanced/serving-a-subdirectory/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/static-assets/routing/advanced/serving-a-subdirectory.mdx)
* [/workers/wrangler/configuration/](https://developers.cloudflare.com/workers/wrangler/configuration/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers/wrangler/configuration.mdx)

**Partials**

File tree is a built-in component provided by [Starlight ↗](https://starlight.astro.build/components/file-tree/).

* Directorysrc  
   * Directorydocs  
         * Directorystyle-guide  
                  * Directorycomponents  
                              * **file-tree.mdx**

```

import { FileTree } from "~/components"


<FileTree>

- src

  - docs

    - style-guide

      - components

        - **file-tree.mdx**

</FileTree>


```

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/style-guide/","name":"Style Guide"}},{"@type":"ListItem","position":3,"item":{"@id":"/style-guide/components/","name":"Components"}},{"@type":"ListItem","position":4,"item":{"@id":"/style-guide/components/file-tree/","name":"File tree"}}]}
```