file-tree directory structure code docs file-tree directory folder structure hierarchy project show project directory structure display file hierarchy
File Tree
Fetch pattern JSON:
curl https://webspire.de/patterns/file-tree/base.json base.html
<div class="ws-file-tree mx-auto max-w-md rounded-xl border border-[var(--ws-file-tree-border)] bg-[var(--ws-file-tree-bg)] p-6 font-mono text-sm">
<div class="font-semibold text-[var(--ws-file-tree-text)]">📁 project</div>
<div class="mt-1 space-y-0.5 pl-5">
<div class="text-[var(--ws-file-tree-text)]">📁 src</div>
<div class="space-y-0.5 pl-5">
<div class="text-[var(--ws-file-tree-text-soft)]">📄 index.ts</div>
<div class="text-[var(--ws-file-tree-text-soft)]">📄 utils.ts</div>
<div class="text-[var(--ws-file-tree-text)]">📁 components</div>
<div class="space-y-0.5 pl-5">
<div class="text-[var(--ws-file-tree-text-soft)]">📄 Button.tsx</div>
<div class="text-[var(--ws-file-tree-text-soft)]">📄 Card.tsx</div>
</div>
</div>
<div class="text-[var(--ws-file-tree-text-soft)]">📄 package.json</div>
<div class="text-[var(--ws-file-tree-text-soft)]">📄 tsconfig.json</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
file-treedirectorystructurecodedocs
Slots
| Name | Required | Description |
|---|---|---|
| tree | Yes | Nested directory and file entries with icons and indentation. |
Monospace file tree component using emoji folder and file icons with nested indentation. Ideal for documentation pages, project overviews, and code reference guides.