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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.