COMPONENT LIBRARY · v1.0
Dashboard UI Kit
A zinc-neutral dashboard system — one accent, tinted semantic status, soft layered elevation and Phosphor duotone icons. Authored once as Blade and rendered identically in the Laravel app and the static HTML build.
40+Components
27Icons shown
3Categories
THEME
Flip light / dark from the header.
01 — FOUNDATIONS
Color
Zinc neutrals · one accent · tinted semantics
NEUTRALS
50
100
200
300
400
500
700
900
ACCENT
Tint
500
600
SEMANTIC
Positive
Critical
Info
Warning
Typography
Inter · tight tracking on display sizes
Display · 32/700HR Insights
Title · 20/700Workforce Overview
Heading · 16/600Team Performance Tracker
Body · 14/500Monitor task assignments and team workload.
Secondary · 13/400Track employee growth and attrition over time.
Label · 11/600CONNECTION STRENGTH
Numerals 125,450
tabular-nums for tables
Elevation & radius
Borders carry structure; shadows stay soft
Flat · border
Card · sm
Dropdown · md
Popover · lg
4
6
8
10
Pill
Iconography
Phosphor duotone · 16–20px in components
Accent for active states
Zinc-500 for rest states
02 — ELEMENTS
Buttons
Inputs
Billing
Selection
Badges & pills
STATUS
Strong
Good
Weak
Pending
Reviewing
DELTA & COUNT
20%
4%
21
7
2
DATE & META
Nov 4
Today
3
5
Tags
Brand & Style
Compliance & Policy
Content Safety Filters
Approval Triggers
Output Quality Checks
Energy Charter Treaty
Human Rights
Avatars
A
K
M
A
K
+5
M
Emura Studio
hello@emura.studio
Tabs & navigation
Underline tracks the selected tab; panels cross-fade without shifting layout.
Kanban groups work by status column.
A dense, single-column list.
Tooltip & menu
82June 2026
64June 2026
Context menu
Hover tooltip
Frosted glass
Translucent layers · backdrop blur + saturate
Quarterly report ready
Workforce summary · 12 pages
12 updates
Motion
120–200ms ease-out · reduced-motion respected
Saving
LOADING SKELETON
Overlays
Card surface
A layered surface — soft elevation over a hairline border, both tuned per theme.
Header, body and footer seams are single-pixel inset rules, never doubled.
Interactive
A dropdown that closes on outside-click or Escape, and a focus-trapped modal that teleports to the body.
03 — PATTERNS
KPI stat cards
Two-layer — white cards on an inset tray; value + delta chip + period.
Total Employees
125,450
7.2%
Compared to the previous period
New Hires
320
9%
Joined this month
Departures
45
1.5%
Compared to the previous period
04 — ALSO IN DASH
Revenue
$48,120
12.4%
vs last week
Active users
8,472
3.1%
vs last week
Orders
1,204
2.8%
vs last week
Conversion
3.42%
0.6pt
vs last week
Alerts
Payouts are on the way
Your first payout of $2,480.00 is scheduled for Jul 16.
Add a backup card
Your primary card expires next month.
Payment failed
We couldn't charge order #3487. Retry or contact the customer.
Toasts
Product added
“Aurora desk lamp” is now live in your catalog.
Export ready
Your orders export finished — download starting.
Refund failed
The gateway rejected the refund for #3489.
Accordion
Payouts run on a rolling 2-day cycle after an order ships.
Yes — open any paid order, choose Refund, and enter an amount up to the captured total.
Dash settles in 15 currencies, charged in the buyer's local currency where available.
Progress & feedback
Onboarding
72%
Storage used
86%
API quota
97%
| Order | Customer | Status | Amount | Date | Action |
|---|---|---|---|---|---|
| #3492 | OM Olivia Martin | Paid | $1,299.00 | Jul 12 | |
| #3491 | LC Liam Chen | Awaiting payment | $459.00 | Jul 12 | |
| #3490 | SR Sofia Rossi | Paid | $2,780.00 | Jul 11 | |
| #3489 | NW Noah Williams | Refunded | $120.00 | Jul 11 | |
| #3487 | EB Ethan Brown | Failed | $310.00 | Jul 10 |
List
Empty state
No orders yet
When customers place orders they'll show up here. Share your store link to get the first one rolling.