Dashboard

An analytics dashboard layout assembled from Oxide UI components. Suitable for API usage views, admin panels, and app analytics.

Stat Cards Row

Preview

Total requests

48,295

+12.5%vs last month

Unique users

3,847

+4.2%vs last month

Downloads

12,041

-2.1%vs last month

Error rate

0.4%

-0.2ppvs last month

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-5">
    <p class="text-[10px] font-semibold uppercase tracking-widest text-zinc-500">Total requests</p>
    <p class="mt-2 text-2xl font-bold tracking-tight text-zinc-100 tabular-nums">48,295</p>
    <div class="mt-1.5 flex items-center gap-1">
      <span class="text-xs font-medium text-emerald-400">+12.5%</span>
      <span class="text-xs text-zinc-600">vs last month</span>
    </div>
  </div>
  <!-- repeat -->
</div>

Usage Bar

Preview

Monthly quota

Resets in 6 days

Thumbnail downloads8,540 / 10,000

Channel lookups2,100 / 5,000

API calls312 / 10,000

<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-5">
  <div class="flex items-center justify-between">
    <p class="text-sm font-semibold text-zinc-100">Monthly quota</p>
    <span class="text-xs text-zinc-500">Resets in 6 days</span>
  </div>
  <div class="mt-4 space-y-3">
    <!-- Each bar -->
    <div>
      <div class="mb-1.5 flex justify-between text-xs">
        <span class="text-zinc-400">Thumbnail downloads</span>
        <span class="text-zinc-500 tabular-nums">8,540 / 10,000</span>
      </div>
      <div class="h-1.5 w-full overflow-hidden rounded-full bg-zinc-800">
        <div class="h-full rounded-full bg-gradient-to-r from-[#D40C37] to-[#e8103f]" style="width: 85.4%" />
      </div>
    </div>
  </div>
</div>

Recent Activity Table

Preview

Name	Status	Role	Action
AM Alex Morgan alex@oxide.dev	Active	Admin
TS Taylor Swift taylor@oxide.dev	Active	Editor
JL Jordan Lee jordan@oxide.dev	Inactive	Viewer

See the Table component for full documentation.

Sidebar Navigation

<aside class="flex h-screen w-64 flex-col border-r border-zinc-800 bg-zinc-950 px-3 py-4">
  <!-- Logo -->
  <div class="mb-6 flex items-center gap-2.5 px-3">
    <div class="flex h-7 w-7 items-center justify-center rounded-md bg-[#D40C37]/10 ring-1 ring-inset ring-[#D40C37]/20">
      <div class="h-2 w-2 rounded-full bg-[#D40C37]" />
    </div>
    <span class="text-sm font-bold text-zinc-100">Oxide UI</span>
  </div>

  <!-- Nav items -->
  <nav class="flex flex-col gap-0.5">
    <a href="/dashboard" class="flex items-center gap-2.5 rounded-md bg-zinc-800/60 px-3 py-2 text-sm font-medium text-zinc-100">
      <!-- icon --> Dashboard
    </a>
    <a href="/tools" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm text-zinc-400 hover:bg-zinc-800/40 hover:text-zinc-100 transition-colors">
      <!-- icon --> Tools
    </a>
    <a href="/settings" class="flex items-center gap-2.5 rounded-md px-3 py-2 text-sm text-zinc-400 hover:bg-zinc-800/40 hover:text-zinc-100 transition-colors">
      <!-- icon --> Settings
    </a>
  </nav>

  <!-- Bottom user section -->
  <div class="mt-auto border-t border-zinc-800 pt-4">
    <div class="flex items-center gap-3 rounded-md px-3 py-2 hover:bg-zinc-800/40 cursor-pointer transition-colors">
      <div class="flex h-7 w-7 items-center justify-center rounded-full bg-[#D40C37]/20 text-xs font-semibold text-[#D40C37]">AM</div>
      <div class="min-w-0 flex-1">
        <p class="text-xs font-medium text-zinc-200 truncate">Alex Morgan</p>
        <p class="text-[10px] text-zinc-500 truncate">alex@oxide.dev</p>
      </div>
    </div>
  </div>
</aside>