Uilora Dashboard
Full SaaS dashboard skeleton with sidebar navigation, topbar, KPI stat cards, chart placeholder, and a data table — all shimmering in sync.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color palette. "dark" uses deep navy tones; "light" uses neutral gray-white. |
| accentColor | string | "#6366f1" | Brand accent color applied as a subtle hairline ring on the content area and tint in the shimmer gradient. |
| sidebarCollapsed | boolean | false | Collapses the sidebar from 220px (icon + label) to 48px (icon-only) with a smooth transition. |
| statCards | number | 4 | Number of KPI stat cards to render (clamped 2–5). Drives a CSS grid-cols-N layout. |
When to Use
Ideal for SaaS admin panels, analytics dashboards, and CRM tools. Drop it in as the loading state for your entire app shell — sidebar, topbar, metrics, chart, and table all load together, preventing layout shift.
Best Practices
Match statCards to your actual KPI count so the skeleton layout mirrors the real UI perfectly. Use sidebarCollapsed=true for apps that default to a collapsed nav on first load.
Why This Component Matters
A full-layout skeleton prevents jarring reflows as content loads. When the sidebar, header, and body areas appear instantly as skeletons, the app feels fast even before a single API call resolves.
FAQ
QHow do I add more table rows?
The table rows are driven by a baked constant inside the component. Fork it and increase the array length — each row is a single reusable component call.
QCan I animate each section separately?
Yes. Each major section (topbar, KPI cards, chart, table) has its own stagger delay baked in. Adjust the `d(n)` delay multiplier at the top of the component.
QDoes sidebarCollapsed affect content layout?
Yes — when collapsed, the main content area expands to fill the freed sidebar space via CSS transition.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.