storage disk usage space file-types dashboard widget storage disk space usage bar file types capacity quota show storage usage display disk space visualize file type breakdown
Storage Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/storage-widget/base.json base.html
<section class="ws-storage-widget bg-[var(--ws-storage-widget-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-xs overflow-hidden rounded-2xl border border-[var(--ws-storage-widget-border)] bg-[var(--ws-storage-widget-bg)] shadow-md">
<div class="px-6 pt-6 pb-4">
<div class="flex items-center justify-between">
<p class="text-sm font-semibold text-[var(--ws-storage-widget-text)]">Storage</p>
<span class="text-xs text-[var(--ws-storage-widget-text-muted)]">64.2 GB / 100 GB</span>
</div>
</div>
<div class="px-6">
<div class="flex h-3 w-full overflow-hidden rounded-full bg-[var(--ws-storage-widget-track)]" role="img" aria-label="Storage usage breakdown: Images 28 GB, Videos 22 GB, Documents 8 GB, Other 6 GB, Free 36 GB">
<div class="h-full bg-sky-500" style="width: 28%"></div>
<div class="h-full bg-violet-500" style="width: 22%"></div>
<div class="h-full bg-[var(--ws-storage-widget-accent)]" style="width: 8%"></div>
<div class="h-full bg-[var(--ws-storage-widget-text-muted)]" style="width: 6%"></div>
</div>
</div>
<div class="px-6 pt-5 pb-6">
<ul class="grid grid-cols-2 gap-x-4 gap-y-3" role="list">
<li class="flex items-center gap-2">
<span class="h-2.5 w-2.5 shrink-0 rounded-full bg-sky-500" aria-hidden="true"></span>
<span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Images</span>
<span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">28 GB</span>
</li>
<li class="flex items-center gap-2">
<span class="h-2.5 w-2.5 shrink-0 rounded-full bg-violet-500" aria-hidden="true"></span>
<span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Videos</span>
<span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">22 GB</span>
</li>
<li class="flex items-center gap-2">
<span class="h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--ws-storage-widget-accent)]" aria-hidden="true"></span>
<span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Docs</span>
<span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">8 GB</span>
</li>
<li class="flex items-center gap-2">
<span class="h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--ws-storage-widget-text-muted)]" aria-hidden="true"></span>
<span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Other</span>
<span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">6 GB</span>
</li>
<li class="col-span-2 flex items-center gap-2">
<span class="h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--ws-storage-widget-track)]" aria-hidden="true"></span>
<span class="text-xs text-[var(--ws-storage-widget-text-soft)]">Free</span>
<span class="ml-auto text-xs font-medium text-[var(--ws-storage-widget-text)]">36 GB</span>
</li>
</ul>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
storagediskusagespacefile-typesdashboardwidget
A storage-usage widget featuring a multi-segment progress bar that breaks down consumed space by category (Images, Videos, Documents, Other) with a color-coded legend. The remaining free space is shown as the track background. Ideal for cloud dashboards, account settings, and admin panels.