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

Family

file-tree

Tier

base

Kind

component

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.