diff --git a/bun.lockb b/bun.lockb
index 40534ebe..8902d497 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/content/AccordionItem.vue b/components/content/AccordionItem.vue
index 49430985..0dc85570 100644
--- a/components/content/AccordionItem.vue
+++ b/components/content/AccordionItem.vue
@@ -20,5 +20,7 @@ defineProps<{
   content?: string;
 }>();
 
+defineSlots();
+
 const autoValue = useId();
 </script>
diff --git a/components/content/Card.vue b/components/content/Card.vue
index 587746be..33624a7e 100644
--- a/components/content/Card.vue
+++ b/components/content/Card.vue
@@ -64,5 +64,8 @@ const {
   showLinkIcon?: boolean;
   horizontal?: boolean;
 }>();
+
+defineSlots();
+
 const [UseTemplate, CardInner] = createReusableTemplate();
 </script>
diff --git a/components/content/CodeGroup.vue b/components/content/CodeGroup.vue
index 56547663..c935a94f 100644
--- a/components/content/CodeGroup.vue
+++ b/components/content/CodeGroup.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import type { SetupContext } from 'vue';
 import Tabs from './Tabs.vue';
 
 const { inStack = false, sync } = defineProps<{
@@ -10,7 +11,7 @@ const { inStack = false, sync } = defineProps<{
   sync?: string;
 }>();
 
-const _slots = useSlots();
+const _slots: SetupContext['slots'] = useSlots();
 function render() {
   const slots = _slots?.default?.() || [];
   return h(
diff --git a/components/content/Collapsible.vue b/components/content/Collapsible.vue
index 719034bb..9960cb42 100644
--- a/components/content/Collapsible.vue
+++ b/components/content/Collapsible.vue
@@ -53,5 +53,6 @@ const {
   title?: string;
   defaultOpen?: boolean;
 }>();
+defineSlots();
 const isOpen = ref(defaultOpen);
 </script>
diff --git a/components/content/FileTree.vue b/components/content/FileTree.vue
new file mode 100644
index 00000000..34e65e85
--- /dev/null
+++ b/components/content/FileTree.vue
@@ -0,0 +1,90 @@
+<template>
+  <UiCard
+    class="relative overflow-hidden [&:not(:first-child)]:mt-5 [&:not(:last-child)]:mb-5"
+  >
+    <div v-if="title" class="flex items-center border-b p-3 font-mono text-sm">
+      <SmartIcon v-if="icon" :name="icon" class="mr-1.5" />
+      <span>{{ title }}</span>
+    </div>
+
+    <div class="w-auto bg-muted/30 p-2">
+      <FileTreeRoot :tree="parsedTree" :show-arrow :show-icon :level="0" />
+    </div>
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+type InputTreeItem = string | {
+  [key: string]: InputTreeItem[];
+};
+
+const {
+  tree,
+  autoSlash = true,
+  showArrow = false,
+  showIcon = true,
+} = defineProps<{
+  title?: string;
+  icon?: string;
+  autoSlash?: boolean;
+  showArrow?: boolean;
+  showIcon?: boolean;
+  tree: InputTreeItem[];
+}>();
+
+const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
+
+function getIcon(filename: string, type: 'folder' | 'file') {
+  if (filename === '...')
+    return;
+  if (filename.endsWith('/'))
+    return 'lucide:folder';
+
+  return iconMap.get(filename.split('.')[filename.split('.').length - 1])
+    || iconMap.get(filename.toLowerCase())
+    || (type === 'file' ? 'lucide:file' : 'lucide:folder');
+}
+
+function getItem(key: string, type: 'folder' | 'file', children?: InputTreeItem[]): FileTreeItem {
+  let title = key;
+  let highlighted = false;
+  if (title.startsWith('^') && title.endsWith('^')) {
+    title = title.substring(1, title.length - 1);
+    highlighted = true;
+  }
+
+  if (type === 'file') {
+    return {
+      title,
+      icon: getIcon(title, 'file'),
+      highlighted,
+    };
+  } else {
+    return {
+      title: `${title}${autoSlash ? '/' : ''}`,
+      icon: getIcon(title, 'folder'),
+      children: children && getTree(children),
+      highlighted,
+    };
+  }
+}
+
+function getTree(tree: InputTreeItem[]) {
+  const res: FileTreeItem[] = [];
+
+  for (const item of tree) {
+    if (typeof item === 'string') {
+      res.push(getItem(item, 'file'));
+    } else if (typeof item === 'object') {
+      for (const key of Object.keys(item))
+        res.push(getItem(key, 'folder', item[key]));
+    }
+  }
+
+  return res;
+}
+
+const parsedTree = computed(() => {
+  return getTree(tree);
+});
+</script>
diff --git a/components/content/FileTreeItem.vue b/components/content/FileTreeItem.vue
new file mode 100644
index 00000000..8b69a92f
--- /dev/null
+++ b/components/content/FileTreeItem.vue
@@ -0,0 +1,58 @@
+<template>
+  <li>
+    <!-- Folder -->
+    <div v-if="tree.children">
+      <a
+        class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-left text-sm font-medium text-foreground/80 hover:bg-muted hover:text-primary"
+        :class="[tree.highlighted && 'underline underline-offset-4']"
+        @click="isOpen = !isOpen"
+      >
+        <SmartIcon
+          v-if="showArrow"
+          name="lucide:chevron-down"
+          class="transition-transform"
+          :class="[!isOpen && '-rotate-90']"
+        />
+
+        <SmartIcon
+          v-if="showIcon && tree.icon"
+          :name="tree.icon"
+          class="min-w-4"
+        />
+
+        <span :class="[tree.highlighted && 'font-bold text-primary']">
+          {{ tree.title }}
+        </span>
+      </a>
+      <div v-show="isOpen">
+        <FileTreeRoot :show-icon :show-arrow :tree="tree.children" :level="level + 1" />
+      </div>
+    </div>
+    <!-- File -->
+    <div
+      v-else
+      class="flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-foreground/80 hover:bg-muted hover:text-primary"
+      :class="[tree.highlighted && 'underline underline-offset-4']"
+    >
+      <SmartIcon
+        v-if="showIcon && tree.icon"
+        :name="tree.icon"
+        class="min-w-4"
+      />
+
+      <span :class="[tree.highlighted && 'font-bold text-primary']">
+        {{ tree.title }}
+      </span>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+const { tree, level } = defineProps<{
+  showArrow: boolean;
+  tree: FileTreeItem;
+  showIcon: boolean;
+  level: number;
+}>();
+const isOpen = ref(true);
+</script>
diff --git a/components/content/FileTreeRoot.vue b/components/content/FileTreeRoot.vue
new file mode 100644
index 00000000..79696c51
--- /dev/null
+++ b/components/content/FileTreeRoot.vue
@@ -0,0 +1,24 @@
+<template>
+  <ul
+    class="flex flex-col font-mono"
+    :class="[level > 0 && 'mx-3.5 border-l px-2']"
+  >
+    <template v-for="link in tree" :key="link._id">
+      <FileTreeItem
+        :show-icon
+        :show-arrow
+        :tree="link"
+        :level="level"
+      />
+    </template>
+  </ul>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  tree: FileTreeItem[];
+  level: number;
+  showArrow: boolean;
+  showIcon: boolean;
+}>();
+</script>
diff --git a/components/content/Hero.vue b/components/content/Hero.vue
index 969c369f..b80857ef 100644
--- a/components/content/Hero.vue
+++ b/components/content/Hero.vue
@@ -58,4 +58,5 @@ defineProps<{
     target?: Target;
   }];
 }>();
+defineSlots();
 </script>
diff --git a/components/content/HeroAlt.vue b/components/content/HeroAlt.vue
index 80be229c..b697146f 100644
--- a/components/content/HeroAlt.vue
+++ b/components/content/HeroAlt.vue
@@ -67,4 +67,5 @@ defineProps<{
   }];
   mobileRight?: 'top' | 'bottom';
 }>();
+defineSlots();
 </script>
diff --git a/components/content/Stack.vue b/components/content/Stack.vue
index e55e8e72..78ca09bd 100644
--- a/components/content/Stack.vue
+++ b/components/content/Stack.vue
@@ -8,3 +8,7 @@
     </div>
   </UiCard>
 </template>
+
+<script setup lang="ts">
+defineSlots();
+</script>
diff --git a/components/content/Tabs.vue b/components/content/Tabs.vue
index fb305fa5..a5ca58de 100644
--- a/components/content/Tabs.vue
+++ b/components/content/Tabs.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import type { SetupContext } from 'vue';
 import TabsInner from './TabsInner.vue';
 
 const {
@@ -23,7 +24,7 @@ const {
   sync?: string;
 }>();
 
-const _slots = useSlots();
+const _slots: SetupContext['slots'] = useSlots();
 function render() {
   const slots = _slots?.default?.() || [];
 
diff --git a/components/content/TabsInner.vue b/components/content/TabsInner.vue
index b907bf8d..a0acc1f2 100644
--- a/components/content/TabsInner.vue
+++ b/components/content/TabsInner.vue
@@ -190,6 +190,7 @@ const { sync, slotsData } = defineProps<{
   searchEmpty?: string;
   sync?: string;
 }>();
+defineSlots();
 
 const syncState = useCookie<{ scope: string; value?: string }[]>('tabs-sync-state', {
   default: () => [],
diff --git a/content/2.components/2.docs/file-tree.md b/content/2.components/2.docs/file-tree.md
new file mode 100644
index 00000000..d2a48163
--- /dev/null
+++ b/content/2.components/2.docs/file-tree.md
@@ -0,0 +1,144 @@
+---
+title: File Tree
+icon: lucide:folder-tree
+badges:
+  - value: 0.8.10
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/blob/main/components/content/FileTree.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  tree:
+    - app:
+      - components:
+        - Header.vue
+        - Footer.vue
+      - composables:
+        - useErrorHandler.ts
+      - ^app.vue^
+    - docs:
+      - index.md
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+tree:
+  - app:
+    - components:
+      - Header.vue
+      - Footer.vue
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^ # This is highlighted
+  - docs:
+    - index.md
+---
+::
+```
+::
+
+### Customizations
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  title: File Tree Title
+  icon: lucide:folder-tree
+  autoSlash: false   # Whether to add a slash after every folder automatically
+  showArrow: true    # Whether to show the guide arrow
+  tree:
+    - components:
+      - layout:
+        - Header.vue
+        - Footer.vue
+        - ...
+      - content:
+        - Accordion.vue
+        - Alert.vue
+        - ProseCode.vue
+        - ...
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+title: File Tree Title
+icon: lucide:folder-tree
+autoSlash: false   # Whether to add a slash after every folder automatically
+showArrow: true    # Whether to show the collapse arrow
+tree:
+  - components:
+    - layout:
+      - Header.vue
+      - Footer.vue
+      - ...
+    - content:
+      - Accordion.vue
+      - Alert.vue
+      - ProseCode.vue
+      - ...
+---
+::
+```
+::
+
+### Disable Icons
+
+::stack
+::div{class="p-4"}
+  ::file-tree
+  ---
+  showIcon: false
+  tree:
+    - app:
+      - components:
+        - Header.vue
+        - Footer.vue
+      - composables:
+        - useErrorHandler.ts
+      - ^app.vue^
+    - docs:
+      - index.md
+  ---
+  ::
+::
+```mdc
+::file-tree
+---
+showIcon: false
+tree:
+  - app:
+    - components:
+      - Header.vue
+      - Footer.vue
+    - composables:
+      - useErrorHandler.ts
+    - ^app.vue^
+  - docs:
+    - index.md
+---
+::
+```
+::
+
+## Props
+
+::field-group
+  :field{name="tree"}[The file tree]
+  :field{name="title" type="string"}[File tree title]
+  :field{name="icon" type="string"}[File tree title icon]
+  :field{name="autoSlash" type="boolean" default-value="true"}[Whether to add a slash after every folder automatically]
+  :field{name="showArrow" type="boolean" default-value="false"}[Whether to show the collapse arrow]
+  :field{name="showIcon" type="boolean" default-value="true"}[Whether to show file & folder icons]
+::
diff --git a/content/3.api/2.advanced/1.override.md b/content/3.api/2.advanced/1.override.md
index 37f438ee..33961040 100644
--- a/content/3.api/2.advanced/1.override.md
+++ b/content/3.api/2.advanced/1.override.md
@@ -8,22 +8,25 @@ _shadcn-docs-nuxt_ is a [Nuxt Layer](https://nuxt.com/docs/getting-started/layer
 
 Here is a brief showcase of the `components/` folder in _shadcn-docs-nuxt_.
 
-```plaintext
-components/
-├── layout/             # Layout components (headers)
-│   ├── Header.vue
-│   ├── Footer.vue
-│   └── ...
-├── content/            # Prose components and mdc components
-│   ├── Accordion.vue
-│   ├── Alert.vue
-│   ├── ProseCode.vue
-│   └── ...
-└── ui/                 # shadcn-vue components
-    ├── button/
-    ├── card/
-    └── ...
-```
+::file-tree
+---
+tree:
+  - components:
+    - layout:
+      - Header.vue
+      - Footer.vue
+      - ...
+    - content:
+      - Accordion.vue
+      - Alert.vue
+      - ProseCode.vue
+      - ...
+    - ui:
+      - button/
+      - card/
+      - ...
+---
+::
 
 :alert[Check out the complete file structure on **GitHub**]{to="https://github.com/ZTL-UwU/shadcn-docs-nuxt/tree/main/components" target="_blank"}
 
diff --git a/package.json b/package.json
index 45eecb9a..3e51ee68 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@iconify-json/lucide": "^1.2.22",
-    "@iconify-json/vscode-icons": "^1.2.9",
+    "@iconify-json/vscode-icons": "^1.2.10",
     "@nuxt/content": "^2.13.4",
     "@nuxt/icon": "^1.10.3",
     "@nuxt/image": "^1.9.0",
@@ -66,14 +66,14 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.12.2",
+    "@antfu/eslint-config": "^3.13.0",
     "@nuxt/devtools": "^1.7.0",
     "@nuxt/kit": "^3.15.1",
-    "@vueuse/core": "^12.3.0",
-    "@vueuse/nuxt": "^12.3.0",
-    "eslint": "^9.17.0",
+    "@vueuse/core": "^12.4.0",
+    "@vueuse/nuxt": "^12.4.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-tailwindcss": "^3.17.5",
     "shiki": "^1.26.1",
-    "vue-tsc": "2.1.10"
+    "vue-tsc": "^2.2.0"
   }
 }
diff --git a/types/index.d.ts b/types/index.d.ts
index 9a6f88bb..6ea0bcad 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -131,3 +131,10 @@ type Color =
   | 'violet';
 
 type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;
+
+interface FileTreeItem {
+  title: string;
+  icon?: string;
+  children?: FileTreeItem[];
+  highlighted: boolean;
+}