File Tree Compact

Fetch pattern JSON: curl https://webspire.de/patterns/file-tree/compact.json

compact.html

<div class="ws-file-tree mx-auto max-w-sm rounded-lg border border-[var(--ws-file-tree-border)] bg-[var(--ws-file-tree-bg)] px-4 py-3 font-mono text-xs">
  <div class="font-semibold text-[var(--ws-file-tree-text)]">📁 project</div>
  <div class="mt-0.5 space-y-px pl-4">
    <div class="text-[var(--ws-file-tree-text)]">📁 src</div>
    <div class="space-y-px pl-4">
      <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-px pl-4">
        <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

enhanced

Kind

component

Extends

file-tree/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

file-treedirectorystructurecompactdense

Slots

Name	Required	Description
tree	Yes	Nested directory and file entries with tighter spacing.

Compact variant of the file tree with smaller text and tighter spacing. Best suited for sidebars, inline references, or dense documentation layouts.