files file-manager storage documents browser dashboard file-manager files folders storage documents browser upload file manager interface document browser layout
File Manager Base
Fetch pattern JSON:
curl https://webspire.de/patterns/file-manager/base.json base.html
<section class="ws-file-manager flex h-[500px] overflow-hidden rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)]">
<!-- Sidebar -->
<aside class="w-52 shrink-0 border-r border-slate-200 bg-slate-50 p-4">
<nav>
<ul class="space-y-1">
<li><a href="#" class="flex items-center gap-2 rounded-lg bg-slate-200/60 px-3 py-2 text-sm font-medium text-slate-900">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
My Files
</a></li>
<li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
Favourites
</a></li>
<li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
Shared
</a></li>
<li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Recent
</a></li>
<li><a href="#" class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
Trash
</a></li>
</ul>
</nav>
<!-- Storage gauge -->
<div class="mt-6 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-3">
<p class="text-xs font-medium text-slate-500">Storage</p>
<div class="mt-2 h-1.5 rounded-full bg-slate-100">
<div class="h-1.5 w-[68%] rounded-full bg-blue-500"></div>
</div>
<p class="mt-1.5 text-xs text-slate-400"><span class="font-medium text-slate-700">6.8 GB</span> of 10 GB</p>
</div>
</aside>
<!-- File area -->
<div class="flex-1 overflow-y-auto p-5">
<div class="mb-4 flex items-center justify-between">
<h2 class="text-lg font-semibold text-slate-900">My Files</h2>
<button class="rounded-lg bg-slate-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-800">Upload</button><!-- ws-ok -->
</div>
<!-- Folders -->
<h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-400">Folders</h3>
<div class="mb-6 grid grid-cols-2 gap-3 lg:grid-cols-3">
<div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3 hover:border-blue-300 hover:bg-blue-50/50 dark:hover:border-blue-600">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
</div>
<div>
<p class="text-sm font-medium text-slate-900">Documents</p>
<p class="text-xs text-slate-400">48 files</p>
</div>
</div>
<div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3 hover:border-emerald-300 hover:bg-emerald-50/50 dark:hover:border-emerald-600">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100">
<svg class="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
</div>
<div>
<p class="text-sm font-medium text-slate-900">Images</p>
<p class="text-xs text-slate-400">124 files</p>
</div>
</div>
<div class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 p-3 hover:border-amber-300 hover:bg-amber-50/50 dark:hover:border-amber-600">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100">
<svg class="h-5 w-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
</div>
<div>
<p class="text-sm font-medium text-slate-900">Videos</p>
<p class="text-xs text-slate-400">12 files</p>
</div>
</div>
</div>
<!-- Files -->
<h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-400">Recent Files</h3>
<table class="w-full text-left text-sm">
<thead>
<tr class="border-b border-slate-100">
<th class="pb-2 font-medium text-slate-400">Name</th>
<th class="pb-2 font-medium text-slate-400">Size</th>
<th class="pb-2 font-medium text-slate-400">Modified</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-50">
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="flex items-center gap-2 py-2.5"><span class="text-blue-500">📄</span> <span class="text-slate-900">proposal-v3.pdf</span></td>
<td class="py-2.5 text-slate-500">2.4 MB</td>
<td class="py-2.5 text-slate-500">Today</td>
</tr>
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="flex items-center gap-2 py-2.5"><span class="text-emerald-500">📊</span> <span class="text-slate-900">q1-report.xlsx</span></td>
<td class="py-2.5 text-slate-500">840 KB</td>
<td class="py-2.5 text-slate-500">Yesterday</td>
</tr>
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
<td class="flex items-center gap-2 py-2.5"><span class="text-purple-500">🎨</span> <span class="text-slate-900">brand-assets.fig</span></td>
<td class="py-2.5 text-slate-500">18 MB</td>
<td class="py-2.5 text-slate-500">Mar 19</td>
</tr>
</tbody>
</table>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
filesfile-managerstoragedocumentsbrowserdashboard
Slots
| Name | Required | Description |
|---|---|---|
| sidebar | Yes | Folder navigation and storage gauge. |
| folders | No | Folder cards grid. |
| files | Yes | File list or table. |