Data Display treedatafiles

File Tree Structure

A nested folder and file list hierarchy for representing directories.

📁 src
📁 components
📄 Button.astro
📄 Card.astro
📄 styles.css
📄 astro.config.mjs

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { FileTreeStructure } from 'astro-component-kit';
---

<FileTreeView>Content</FileTreeView>
--- import { FileTreeStructure } from 'astro-component-kit'; --- <FileTreeView>Content</FileTreeView>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/FileTreeStructure.astro and paste the following code:

astro 
---
---
<div class="tree">
  <div class="folder active">📁 src</div>
  <div class="indent">
    <div class="folder">📁 components</div>
    <div class="indent">
      <div class="file">📄 Button.astro</div>
      <div class="file">📄 Card.astro</div>
    </div>
    <div class="file">📄 styles.css</div>
  </div>
  <div class="file">📄 astro.config.mjs</div>
</div>
<style>
  .tree { font-family: monospace; font-size: 0.85rem; color: #94a3b8; line-height: 1.8; }
  .indent { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.1); }
  .folder { color: #fff; font-weight: 700; cursor: pointer; }
  .folder.active { color: #818cf8; }
  .file { cursor: pointer; padding-left: 4px; }
  .file:hover { color: #fff; }
</style>
--- --- <div class="tree"> <div class="folder active">📁 src</div> <div class="indent"> <div class="folder">📁 components</div> <div class="indent"> <div class="file">📄 Button.astro</div> <div class="file">📄 Card.astro</div> </div> <div class="file">📄 styles.css</div> </div> <div class="file">📄 astro.config.mjs</div> </div> <style> .tree { font-family: monospace; font-size: 0.85rem; color: #94a3b8; line-height: 1.8; } .indent { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,0.1); } .folder { color: #fff; font-weight: 700; cursor: pointer; } .folder.active { color: #818cf8; } .file { cursor: pointer; padding-left: 4px; } .file:hover { color: #fff; } </style>

Quick Info

Category
Data Display
Filename
FileTreeStructure.astro
Dependencies
None — pure Astro + CSS
Tags
treedatafiles