Data-driven layout for SaaS admin panels and analytics platforms. Dark sidebar, crisp topbar, KPI grid, charts, and data tables — all snapping into place with precision micro-interactions.
Full interactive dashboard with dark sidebar, KPI cards, bar chart, and data table. Toggle viewport to see responsive behavior.
| Order | Customer | Amount | Status |
|---|---|---|---|
| #4821 | Alice Chen | $299 | Paid |
| #4820 | Marcus Webb | $899 | Paid |
| #4819 | Priya Sharma | $49 | Pending |
| #4818 | Tom Nakamura | $299 | Failed |
| #4817 | Sara Liu | $899 | Paid |
Desktop: sidebar w-64 + 4-col KPI grid + chart split (2:1) + full table
Three zones working in concert. Each zone has a clear role and a defined Tailwind class pattern.
Primary navigation, branding, user identity. Dark and persistent — always visible on desktop.
Contextual actions: search, notifications, user avatar. Sticky at the top of the content column.
KPI cards, charts, tables, and page-specific data. Scrolls independently of the sidebar.
| Breakpoint | Sidebar | KPI Grid | Charts |
|---|---|---|---|
| xl (1280px+) | w-64 visible | grid-cols-4 | 2fr 1fr split |
| lg (1024px) | w-56 visible | grid-cols-4 | 2fr 1fr split |
| md (768px) | w-48 compact | grid-cols-2 | single column |
| sm (375px) | hidden | grid-cols-2 | hidden / tab |
All interactive. Hover to see micro-interactions. Each component enforces the 150ms crisp SaaS feel from the aiRules.
KPI Card — group-hover float + number scale + color shift
group-hover:scale-[1.05] group-hover:text-indigo-600 — KPI Focus rule
hover:bg-gray-50 hover:shadow-md hover:-translate-y-0.5 — Hover Hinting rule
transition-all duration-150 ease-out — Crisp SaaS Feel rule
Four named rules from the aiRules spec — each demonstrated with a live interactive element. Hover and click to feel the SaaS precision.
All micro-interactions use duration-150 ease-out — fast and precise. No sluggishness, no spring overshoot.
duration-150 ease-out everywhere
Click any button — notice the instant, precise response.
KPI card hover causes slight upward float + core number grows via group-hover:scale-105 group-hover:text-indigo-600
hover:-translate-y-0.5 + group-hover:scale-[1.05]
vs. $42,890 last month
Hover the card — number scales and turns indigo.
Data rows, panels, and actionable cards get explicit bg on hover: hover:bg-gray-50
hover:bg-gray-50 on every interactive row
Hover any row — gray-50 signals interactivity.
Button click has clear press feedback: active:scale-[0.97] + visible focus ring for a11y.
active:scale-[0.97] + focus:ring-2
Click — immediate press feedback. Tab to focus — visible ring.
The rules that separate a professional SaaS dashboard from a cluttered mess. Distilled from the style definition.