Tungsten Stats Matrix
A data-heavy industrial logistics dashboard block with structured stat cards.
Features
- Dark bg (#111827) with tungsten gray (#374151, #6B7280) and electric yellow (#FBBF24) accent
- Space Mono for numbers, Manrope for labels and body text
- Full-width hero card: Total Shipments with progress bar and monthly target
- Mini stats row within hero (On Time, Avg Weight, Revenue, Cost/Unit)
- 6 stat cards in 3x2 responsive grid
- Each card: large number, label, trend indicator (up/down arrow + percentage), mini sparkline bars
- Color-coded trend indicators (green for positive, red for negative)
- Subtle dotted grid background pattern for industrial texture
- Live badge with pulse animation, Q1 2026 period badge
- Bottom status bar with system health and last sync
- Dark mode support with deeper bg (#0A0F1A)
Dependencies
lucide-react for icons- Shadcn UI: Card, Badge
Customization
- Connect stat values to real logistics data APIs
- Adjust monthly target and progress bar dynamically
- Replace mini sparkline bars with real chart data
- Swap yellow accent for your brand color
- Add click handlers to cards for drill-down views
