@neuctra/ui-mcp 0.4.7 → 0.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/components.json +40 -40
- package/data/design-rules.json +41 -9
- package/data/layouts.json +53 -16
- package/data/theme.json +11 -8
- package/data/variants.json +1113 -0
- package/package.json +3 -1
- package/src/load-data.mjs +2 -1
- package/src/tools/neuctra-ui-page-builder/index.mjs +26 -2
- package/src/tools/neuctra-ui-page-builder/variants.mjs +102 -0
|
@@ -0,0 +1,1113 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 1,
|
|
3
|
+
"description": "Context-driven design variants for application UI. The page builder scores every variant against the request (domain words, layout, density, platform) and recommends one per group plus alternatives, so dashboards stop repeating the same sidebar, stat cards and grid.",
|
|
4
|
+
"principles": [
|
|
5
|
+
"Derive a short design brief from the request before choosing anything: domain (finance, health, devops, commerce, education...), primary user (operator, executive, end customer, developer), data density, how often the page is used, and the one decision the page should support.",
|
|
6
|
+
"Pick one variant per group deliberately from that brief. The recommended variant is a starting point, not a mandate: if an alternative fits the brief better, use it and say why in one sentence.",
|
|
7
|
+
"Inside one existing app, consistency wins: if the project already has an app shell, sidebar or stat card style, reuse it for new pages instead of introducing a new variant. Variety applies across different products and contexts, not between pages of the same product.",
|
|
8
|
+
"Content must come from the domain. A clinic dashboard shows appointments, no-shows and wait time; a SaaS dashboard shows MRR, churn and activation. Never ship generic 'Total Users / Revenue / Orders / Growth' placeholders unless the request is literally about those.",
|
|
9
|
+
"Do not combine more than two stat card variants on one page, and keep a single variant within one row.",
|
|
10
|
+
"Vary the active-state treatment, header style and grid to fit the variant. Do not fall back to the same left-border active item, four equal stat cards and chart-plus-table grid every time."
|
|
11
|
+
],
|
|
12
|
+
"groups": {
|
|
13
|
+
"navigationShell": {
|
|
14
|
+
"title": "Navigation shell",
|
|
15
|
+
"appliesTo": [
|
|
16
|
+
"dashboard",
|
|
17
|
+
"analytics-dashboard",
|
|
18
|
+
"crm-pipeline",
|
|
19
|
+
"data-table",
|
|
20
|
+
"inbox",
|
|
21
|
+
"kanban-board",
|
|
22
|
+
"project-workspace",
|
|
23
|
+
"report-builder",
|
|
24
|
+
"settings",
|
|
25
|
+
"team-management"
|
|
26
|
+
],
|
|
27
|
+
"variants": [
|
|
28
|
+
{
|
|
29
|
+
"id": "grouped-sidebar",
|
|
30
|
+
"name": "Grouped full sidebar",
|
|
31
|
+
"bestFor": "Admin panels and back offices with many destinations (8+) that fall into clear groups.",
|
|
32
|
+
"signals": [
|
|
33
|
+
"admin",
|
|
34
|
+
"back office",
|
|
35
|
+
"erp",
|
|
36
|
+
"management",
|
|
37
|
+
"hr",
|
|
38
|
+
"school",
|
|
39
|
+
"hospital",
|
|
40
|
+
"clinic",
|
|
41
|
+
"inventory",
|
|
42
|
+
"settings",
|
|
43
|
+
"control panel"
|
|
44
|
+
],
|
|
45
|
+
"layouts": [
|
|
46
|
+
"settings",
|
|
47
|
+
"data-table"
|
|
48
|
+
],
|
|
49
|
+
"density": [
|
|
50
|
+
"balanced",
|
|
51
|
+
"compact"
|
|
52
|
+
],
|
|
53
|
+
"platforms": [
|
|
54
|
+
"desktop",
|
|
55
|
+
"responsive"
|
|
56
|
+
],
|
|
57
|
+
"structure": "aside w-64 (logo, grouped nav with small muted section labels, user menu pinned at bottom) | main",
|
|
58
|
+
"implementation": [
|
|
59
|
+
"Section labels: text-xs uppercase tracking-wide text-muted-foreground, 2-5 items per group.",
|
|
60
|
+
"Active item: bg-primary/10 text-primary rounded-md with the icon also tinted.",
|
|
61
|
+
"On mobile the sidebar becomes a Drawer opened from a menu Icon Button in a slim top bar."
|
|
62
|
+
],
|
|
63
|
+
"avoid": [
|
|
64
|
+
"More than 5 groups",
|
|
65
|
+
"Descriptions under nav items"
|
|
66
|
+
]
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"id": "icon-rail",
|
|
70
|
+
"name": "Icon rail",
|
|
71
|
+
"bestFor": "Focused tools with few top-level areas (6 or fewer) where the canvas or data needs maximum width.",
|
|
72
|
+
"signals": [
|
|
73
|
+
"editor",
|
|
74
|
+
"builder",
|
|
75
|
+
"canvas",
|
|
76
|
+
"design tool",
|
|
77
|
+
"trading",
|
|
78
|
+
"terminal",
|
|
79
|
+
"monitoring",
|
|
80
|
+
"map",
|
|
81
|
+
"devops",
|
|
82
|
+
"observability",
|
|
83
|
+
"studio"
|
|
84
|
+
],
|
|
85
|
+
"layouts": [
|
|
86
|
+
"report-builder"
|
|
87
|
+
],
|
|
88
|
+
"density": [
|
|
89
|
+
"compact"
|
|
90
|
+
],
|
|
91
|
+
"platforms": [
|
|
92
|
+
"desktop",
|
|
93
|
+
"responsive"
|
|
94
|
+
],
|
|
95
|
+
"structure": "aside w-16 (logo mark, icon-only Icon Buttons with Tooltips, settings + avatar at bottom) | main full width",
|
|
96
|
+
"implementation": [
|
|
97
|
+
"Every icon has a Tooltip with its label and an aria-label.",
|
|
98
|
+
"Active item: filled bg-primary text-primary-foreground square with rounded-lg, no text.",
|
|
99
|
+
"On mobile switch to a bottom tab bar with the same 4-5 destinations."
|
|
100
|
+
],
|
|
101
|
+
"avoid": [
|
|
102
|
+
"More than 7 icons",
|
|
103
|
+
"Icons without tooltips"
|
|
104
|
+
]
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"id": "rail-plus-panel",
|
|
108
|
+
"name": "Rail plus contextual panel",
|
|
109
|
+
"bestFor": "Multi-module products where each module has its own list: mail, chat, projects with sub-lists, file managers.",
|
|
110
|
+
"signals": [
|
|
111
|
+
"inbox",
|
|
112
|
+
"email",
|
|
113
|
+
"mail",
|
|
114
|
+
"chat",
|
|
115
|
+
"messages",
|
|
116
|
+
"messaging",
|
|
117
|
+
"support desk",
|
|
118
|
+
"helpdesk",
|
|
119
|
+
"files",
|
|
120
|
+
"drive",
|
|
121
|
+
"notes",
|
|
122
|
+
"projects",
|
|
123
|
+
"channels"
|
|
124
|
+
],
|
|
125
|
+
"layouts": [
|
|
126
|
+
"inbox",
|
|
127
|
+
"project-workspace"
|
|
128
|
+
],
|
|
129
|
+
"density": [
|
|
130
|
+
"balanced",
|
|
131
|
+
"compact"
|
|
132
|
+
],
|
|
133
|
+
"platforms": [
|
|
134
|
+
"desktop",
|
|
135
|
+
"responsive"
|
|
136
|
+
],
|
|
137
|
+
"structure": "icon rail w-16 (modules) | panel w-64 (module-specific list, search, filters) | main",
|
|
138
|
+
"implementation": [
|
|
139
|
+
"The rail switches modules; the panel shows the selected module's folders, channels or projects with counts as Badge.",
|
|
140
|
+
"Panel uses bg-card with border-r border-border; rail uses bg-background.",
|
|
141
|
+
"On tablet hide the panel behind a toggle; on mobile collapse both into a Drawer."
|
|
142
|
+
],
|
|
143
|
+
"avoid": [
|
|
144
|
+
"Duplicating the same links in rail and panel"
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"id": "collapsible-sidebar",
|
|
149
|
+
"name": "Collapsible sidebar",
|
|
150
|
+
"bestFor": "General SaaS products with a medium nav (5-10 items) where users sometimes want more room.",
|
|
151
|
+
"signals": [
|
|
152
|
+
"saas",
|
|
153
|
+
"crm",
|
|
154
|
+
"platform",
|
|
155
|
+
"portal",
|
|
156
|
+
"app",
|
|
157
|
+
"subscription",
|
|
158
|
+
"billing",
|
|
159
|
+
"customers",
|
|
160
|
+
"sales"
|
|
161
|
+
],
|
|
162
|
+
"layouts": [
|
|
163
|
+
"dashboard",
|
|
164
|
+
"crm-pipeline"
|
|
165
|
+
],
|
|
166
|
+
"density": [
|
|
167
|
+
"balanced"
|
|
168
|
+
],
|
|
169
|
+
"platforms": [
|
|
170
|
+
"desktop",
|
|
171
|
+
"responsive"
|
|
172
|
+
],
|
|
173
|
+
"structure": "aside w-64 that collapses to w-16 via a toggle Icon Button in its header | main",
|
|
174
|
+
"implementation": [
|
|
175
|
+
"Collapsed state keeps icons with Tooltips; transition width with duration-200.",
|
|
176
|
+
"Active item: subtle bg-accent with a small primary dot or bar before the label.",
|
|
177
|
+
"Persist the collapsed state (localStorage) so it does not reset on navigation."
|
|
178
|
+
],
|
|
179
|
+
"avoid": [
|
|
180
|
+
"Animating anything except width"
|
|
181
|
+
]
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"id": "top-navbar",
|
|
185
|
+
"name": "Top navigation bar",
|
|
186
|
+
"bestFor": "Products with 6 or fewer sections and wide content: analytics, reports, personal finance, store owners, consumer dashboards.",
|
|
187
|
+
"signals": [
|
|
188
|
+
"analytics",
|
|
189
|
+
"report",
|
|
190
|
+
"reports",
|
|
191
|
+
"personal",
|
|
192
|
+
"finance",
|
|
193
|
+
"banking",
|
|
194
|
+
"budget",
|
|
195
|
+
"wallet",
|
|
196
|
+
"store",
|
|
197
|
+
"shop owner",
|
|
198
|
+
"creator",
|
|
199
|
+
"portfolio",
|
|
200
|
+
"simple",
|
|
201
|
+
"marketing"
|
|
202
|
+
],
|
|
203
|
+
"layouts": [
|
|
204
|
+
"analytics-dashboard"
|
|
205
|
+
],
|
|
206
|
+
"density": [
|
|
207
|
+
"spacious",
|
|
208
|
+
"balanced"
|
|
209
|
+
],
|
|
210
|
+
"platforms": [
|
|
211
|
+
"desktop",
|
|
212
|
+
"responsive"
|
|
213
|
+
],
|
|
214
|
+
"structure": "header h-14 (logo, horizontal nav links, search, notifications, avatar) | main centered max-w-7xl",
|
|
215
|
+
"implementation": [
|
|
216
|
+
"Active link: text-foreground with a 2px primary underline; inactive links text-muted-foreground.",
|
|
217
|
+
"Optional second row of Tabs for sub-views of the current section.",
|
|
218
|
+
"On mobile collapse links into a Drawer or Dropdown menu."
|
|
219
|
+
],
|
|
220
|
+
"avoid": [
|
|
221
|
+
"More than 6 top-level links"
|
|
222
|
+
]
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"id": "inset-sidebar",
|
|
226
|
+
"name": "Inset sidebar",
|
|
227
|
+
"bestFor": "Modern, premium or AI products where the main area should feel like a raised workspace.",
|
|
228
|
+
"signals": [
|
|
229
|
+
"ai",
|
|
230
|
+
"assistant",
|
|
231
|
+
"copilot",
|
|
232
|
+
"modern",
|
|
233
|
+
"premium",
|
|
234
|
+
"minimal",
|
|
235
|
+
"startup",
|
|
236
|
+
"agent",
|
|
237
|
+
"workspace",
|
|
238
|
+
"productivity"
|
|
239
|
+
],
|
|
240
|
+
"layouts": [
|
|
241
|
+
"project-workspace",
|
|
242
|
+
"dashboard"
|
|
243
|
+
],
|
|
244
|
+
"density": [
|
|
245
|
+
"balanced",
|
|
246
|
+
"spacious"
|
|
247
|
+
],
|
|
248
|
+
"platforms": [
|
|
249
|
+
"desktop",
|
|
250
|
+
"responsive"
|
|
251
|
+
],
|
|
252
|
+
"structure": "page bg-background > aside w-60 without border | main as an inset panel: m-2 rounded-xl border border-border bg-card",
|
|
253
|
+
"implementation": [
|
|
254
|
+
"The sidebar has no border or background of its own; separation comes from the inset main panel.",
|
|
255
|
+
"Active item: bg-card text-foreground rounded-md (it looks lifted into the same surface as main).",
|
|
256
|
+
"On mobile drop the inset margin and use a Drawer for navigation."
|
|
257
|
+
],
|
|
258
|
+
"avoid": [
|
|
259
|
+
"Shadows or gradients on the inset panel"
|
|
260
|
+
]
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"id": "workspace-sidebar",
|
|
264
|
+
"name": "Workspace switcher sidebar",
|
|
265
|
+
"bestFor": "Multi-tenant products: teams, organizations, agencies managing clients.",
|
|
266
|
+
"signals": [
|
|
267
|
+
"team",
|
|
268
|
+
"teams",
|
|
269
|
+
"organization",
|
|
270
|
+
"organisation",
|
|
271
|
+
"workspace",
|
|
272
|
+
"tenant",
|
|
273
|
+
"agency",
|
|
274
|
+
"clients",
|
|
275
|
+
"multi tenant",
|
|
276
|
+
"members"
|
|
277
|
+
],
|
|
278
|
+
"layouts": [
|
|
279
|
+
"team-management",
|
|
280
|
+
"project-workspace"
|
|
281
|
+
],
|
|
282
|
+
"density": [
|
|
283
|
+
"balanced"
|
|
284
|
+
],
|
|
285
|
+
"platforms": [
|
|
286
|
+
"desktop",
|
|
287
|
+
"responsive"
|
|
288
|
+
],
|
|
289
|
+
"structure": "aside w-64 (workspace switcher Dropdown at top, nav, pinned favorites or projects list, plan/usage Progress and user menu at bottom) | main",
|
|
290
|
+
"implementation": [
|
|
291
|
+
"Workspace switcher shows Avatar + name + chevron and opens a Dropdown listing workspaces.",
|
|
292
|
+
"Pinned items list uses small colored Avatar initials, not icons, to distinguish projects.",
|
|
293
|
+
"Usage meter at the bottom uses Progress with a short label."
|
|
294
|
+
],
|
|
295
|
+
"avoid": [
|
|
296
|
+
"Showing the switcher when there is only one workspace"
|
|
297
|
+
]
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"id": "bottom-tab-bar",
|
|
301
|
+
"name": "Bottom tab bar",
|
|
302
|
+
"bestFor": "Mobile-first apps and consumer products used mainly on phones.",
|
|
303
|
+
"signals": [
|
|
304
|
+
"mobile",
|
|
305
|
+
"phone",
|
|
306
|
+
"fitness",
|
|
307
|
+
"health",
|
|
308
|
+
"delivery",
|
|
309
|
+
"rider",
|
|
310
|
+
"driver",
|
|
311
|
+
"habit",
|
|
312
|
+
"tracker",
|
|
313
|
+
"pwa"
|
|
314
|
+
],
|
|
315
|
+
"layouts": [],
|
|
316
|
+
"density": [
|
|
317
|
+
"spacious",
|
|
318
|
+
"balanced"
|
|
319
|
+
],
|
|
320
|
+
"platforms": [
|
|
321
|
+
"mobile"
|
|
322
|
+
],
|
|
323
|
+
"structure": "slim top bar (title, one action) | main | fixed bottom nav with 4-5 icon+label tabs (sm and up: switch to icon rail)",
|
|
324
|
+
"implementation": [
|
|
325
|
+
"Tabs: icon above text-xs label, active tab text-primary, add pb-[env(safe-area-inset-bottom)].",
|
|
326
|
+
"Primary create action can sit in the center tab as a filled bg-primary circle.",
|
|
327
|
+
"Content gets bottom padding so the bar never covers it."
|
|
328
|
+
],
|
|
329
|
+
"avoid": [
|
|
330
|
+
"More than 5 tabs",
|
|
331
|
+
"Hiding labels"
|
|
332
|
+
]
|
|
333
|
+
}
|
|
334
|
+
]
|
|
335
|
+
},
|
|
336
|
+
"pageHeader": {
|
|
337
|
+
"title": "Page header",
|
|
338
|
+
"appliesTo": [
|
|
339
|
+
"dashboard",
|
|
340
|
+
"analytics-dashboard",
|
|
341
|
+
"crm-pipeline",
|
|
342
|
+
"data-table",
|
|
343
|
+
"kanban-board",
|
|
344
|
+
"project-workspace",
|
|
345
|
+
"report-builder",
|
|
346
|
+
"settings",
|
|
347
|
+
"team-management",
|
|
348
|
+
"status-page"
|
|
349
|
+
],
|
|
350
|
+
"variants": [
|
|
351
|
+
{
|
|
352
|
+
"id": "title-actions",
|
|
353
|
+
"name": "Title with actions",
|
|
354
|
+
"bestFor": "Pages with one clear primary action.",
|
|
355
|
+
"signals": [
|
|
356
|
+
"create",
|
|
357
|
+
"add",
|
|
358
|
+
"new",
|
|
359
|
+
"manage",
|
|
360
|
+
"admin"
|
|
361
|
+
],
|
|
362
|
+
"layouts": [
|
|
363
|
+
"data-table",
|
|
364
|
+
"team-management"
|
|
365
|
+
],
|
|
366
|
+
"density": [
|
|
367
|
+
"balanced",
|
|
368
|
+
"compact"
|
|
369
|
+
],
|
|
370
|
+
"platforms": [
|
|
371
|
+
"desktop",
|
|
372
|
+
"responsive",
|
|
373
|
+
"mobile"
|
|
374
|
+
],
|
|
375
|
+
"structure": "flex justify-between: (h1 + one-line description) | (secondary Button + primary Button)",
|
|
376
|
+
"implementation": [
|
|
377
|
+
"Stack vertically below sm, actions full width."
|
|
378
|
+
],
|
|
379
|
+
"avoid": [
|
|
380
|
+
"More than two buttons"
|
|
381
|
+
]
|
|
382
|
+
},
|
|
383
|
+
{
|
|
384
|
+
"id": "greeting",
|
|
385
|
+
"name": "Personal greeting",
|
|
386
|
+
"bestFor": "Home dashboards for individual users who return daily.",
|
|
387
|
+
"signals": [
|
|
388
|
+
"home",
|
|
389
|
+
"welcome",
|
|
390
|
+
"personal",
|
|
391
|
+
"my",
|
|
392
|
+
"overview",
|
|
393
|
+
"student",
|
|
394
|
+
"patient",
|
|
395
|
+
"member",
|
|
396
|
+
"fitness",
|
|
397
|
+
"habit"
|
|
398
|
+
],
|
|
399
|
+
"layouts": [],
|
|
400
|
+
"density": [
|
|
401
|
+
"spacious",
|
|
402
|
+
"balanced"
|
|
403
|
+
],
|
|
404
|
+
"platforms": [
|
|
405
|
+
"desktop",
|
|
406
|
+
"responsive",
|
|
407
|
+
"mobile"
|
|
408
|
+
],
|
|
409
|
+
"structure": "\"Good morning, {name}\" (h1) + today's date and one summary sentence (\"3 tasks due today\") | quick action Chips",
|
|
410
|
+
"implementation": [
|
|
411
|
+
"Summary sentence is computed from real data, not generic copy."
|
|
412
|
+
],
|
|
413
|
+
"avoid": [
|
|
414
|
+
"Using it for admin or multi-user operational screens"
|
|
415
|
+
]
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"id": "title-toolbar",
|
|
419
|
+
"name": "Title with filter toolbar",
|
|
420
|
+
"bestFor": "Analytics and reporting views driven by a date range and filters.",
|
|
421
|
+
"signals": [
|
|
422
|
+
"analytics",
|
|
423
|
+
"report",
|
|
424
|
+
"reports",
|
|
425
|
+
"metrics",
|
|
426
|
+
"kpi",
|
|
427
|
+
"performance",
|
|
428
|
+
"insights",
|
|
429
|
+
"revenue",
|
|
430
|
+
"traffic"
|
|
431
|
+
],
|
|
432
|
+
"layouts": [
|
|
433
|
+
"analytics-dashboard",
|
|
434
|
+
"report-builder"
|
|
435
|
+
],
|
|
436
|
+
"density": [
|
|
437
|
+
"balanced",
|
|
438
|
+
"compact"
|
|
439
|
+
],
|
|
440
|
+
"platforms": [
|
|
441
|
+
"desktop",
|
|
442
|
+
"responsive"
|
|
443
|
+
],
|
|
444
|
+
"structure": "row 1: h1 + last-updated meta | row 2: date range Select, segment filters, Export Button",
|
|
445
|
+
"implementation": [
|
|
446
|
+
"Show active filters as removable Chips under the toolbar."
|
|
447
|
+
],
|
|
448
|
+
"avoid": [
|
|
449
|
+
"Hiding the date range inside a menu"
|
|
450
|
+
]
|
|
451
|
+
},
|
|
452
|
+
{
|
|
453
|
+
"id": "title-tabs",
|
|
454
|
+
"name": "Title with view tabs",
|
|
455
|
+
"bestFor": "One entity viewed several ways (overview, activity, settings).",
|
|
456
|
+
"signals": [
|
|
457
|
+
"project",
|
|
458
|
+
"account",
|
|
459
|
+
"profile",
|
|
460
|
+
"settings",
|
|
461
|
+
"workspace",
|
|
462
|
+
"customer",
|
|
463
|
+
"detail"
|
|
464
|
+
],
|
|
465
|
+
"layouts": [
|
|
466
|
+
"project-workspace",
|
|
467
|
+
"settings",
|
|
468
|
+
"crm-pipeline"
|
|
469
|
+
],
|
|
470
|
+
"density": [
|
|
471
|
+
"balanced"
|
|
472
|
+
],
|
|
473
|
+
"platforms": [
|
|
474
|
+
"desktop",
|
|
475
|
+
"responsive"
|
|
476
|
+
],
|
|
477
|
+
"structure": "Breadcrumb (optional) + h1 + status Badge | Tabs row flush with the content border",
|
|
478
|
+
"implementation": [
|
|
479
|
+
"Tabs scroll horizontally on mobile instead of wrapping."
|
|
480
|
+
],
|
|
481
|
+
"avoid": [
|
|
482
|
+
"Tabs with a single item"
|
|
483
|
+
]
|
|
484
|
+
},
|
|
485
|
+
{
|
|
486
|
+
"id": "status-banner",
|
|
487
|
+
"name": "Status banner header",
|
|
488
|
+
"bestFor": "Operational and monitoring screens where overall health is the first thing to know.",
|
|
489
|
+
"signals": [
|
|
490
|
+
"status",
|
|
491
|
+
"uptime",
|
|
492
|
+
"monitoring",
|
|
493
|
+
"incident",
|
|
494
|
+
"health",
|
|
495
|
+
"infra",
|
|
496
|
+
"server",
|
|
497
|
+
"devops",
|
|
498
|
+
"system"
|
|
499
|
+
],
|
|
500
|
+
"layouts": [
|
|
501
|
+
"status-page"
|
|
502
|
+
],
|
|
503
|
+
"density": [
|
|
504
|
+
"compact",
|
|
505
|
+
"balanced"
|
|
506
|
+
],
|
|
507
|
+
"platforms": [
|
|
508
|
+
"desktop",
|
|
509
|
+
"responsive"
|
|
510
|
+
],
|
|
511
|
+
"structure": "full-width band: status icon + \"All systems operational\" (or the current issue) + last checked time | refresh Icon Button",
|
|
512
|
+
"implementation": [
|
|
513
|
+
"Band color follows status tokens: success, warning or destructive with matching -foreground."
|
|
514
|
+
],
|
|
515
|
+
"avoid": [
|
|
516
|
+
"Showing green when data is stale"
|
|
517
|
+
]
|
|
518
|
+
}
|
|
519
|
+
]
|
|
520
|
+
},
|
|
521
|
+
"statCard": {
|
|
522
|
+
"title": "Stat card",
|
|
523
|
+
"appliesTo": [
|
|
524
|
+
"dashboard",
|
|
525
|
+
"analytics-dashboard",
|
|
526
|
+
"crm-pipeline",
|
|
527
|
+
"report-builder",
|
|
528
|
+
"status-page",
|
|
529
|
+
"team-management",
|
|
530
|
+
"project-workspace",
|
|
531
|
+
"data-table"
|
|
532
|
+
],
|
|
533
|
+
"variants": [
|
|
534
|
+
{
|
|
535
|
+
"id": "number-delta",
|
|
536
|
+
"name": "Number with delta",
|
|
537
|
+
"bestFor": "Headline KPIs compared with the previous period.",
|
|
538
|
+
"signals": [
|
|
539
|
+
"sales",
|
|
540
|
+
"orders",
|
|
541
|
+
"conversion",
|
|
542
|
+
"signups",
|
|
543
|
+
"kpi",
|
|
544
|
+
"growth",
|
|
545
|
+
"weekly",
|
|
546
|
+
"monthly"
|
|
547
|
+
],
|
|
548
|
+
"layouts": [],
|
|
549
|
+
"density": [
|
|
550
|
+
"balanced",
|
|
551
|
+
"compact"
|
|
552
|
+
],
|
|
553
|
+
"platforms": [
|
|
554
|
+
"desktop",
|
|
555
|
+
"responsive",
|
|
556
|
+
"mobile"
|
|
557
|
+
],
|
|
558
|
+
"structure": "label (text-sm text-muted-foreground) | value (text-3xl font-semibold tabular-nums) | delta Badge (success/destructive) + \"vs last month\"",
|
|
559
|
+
"implementation": [
|
|
560
|
+
"Delta direction uses an arrow icon plus color, never color alone."
|
|
561
|
+
],
|
|
562
|
+
"avoid": [
|
|
563
|
+
"Deltas without a comparison period"
|
|
564
|
+
]
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
"id": "sparkline",
|
|
568
|
+
"name": "Number with sparkline",
|
|
569
|
+
"bestFor": "Metrics where the recent trend matters as much as the current value.",
|
|
570
|
+
"signals": [
|
|
571
|
+
"traffic",
|
|
572
|
+
"visits",
|
|
573
|
+
"visitors",
|
|
574
|
+
"revenue",
|
|
575
|
+
"mrr",
|
|
576
|
+
"users",
|
|
577
|
+
"active users",
|
|
578
|
+
"trend",
|
|
579
|
+
"analytics",
|
|
580
|
+
"requests"
|
|
581
|
+
],
|
|
582
|
+
"layouts": [
|
|
583
|
+
"analytics-dashboard"
|
|
584
|
+
],
|
|
585
|
+
"density": [
|
|
586
|
+
"balanced"
|
|
587
|
+
],
|
|
588
|
+
"platforms": [
|
|
589
|
+
"desktop",
|
|
590
|
+
"responsive"
|
|
591
|
+
],
|
|
592
|
+
"structure": "label + value + delta on the left | ApexCharts sparkline (area, height 48-64) on the right or full width at the bottom",
|
|
593
|
+
"implementation": [
|
|
594
|
+
"Sparkline: chart.sparkline.enabled = true, stroke width 2, color from --primary or the status token matching the trend."
|
|
595
|
+
],
|
|
596
|
+
"avoid": [
|
|
597
|
+
"Axes or tooltips cluttering the sparkline"
|
|
598
|
+
]
|
|
599
|
+
},
|
|
600
|
+
{
|
|
601
|
+
"id": "progress-goal",
|
|
602
|
+
"name": "Progress toward goal",
|
|
603
|
+
"bestFor": "Values with a target or limit: quotas, budgets, storage, course completion.",
|
|
604
|
+
"signals": [
|
|
605
|
+
"goal",
|
|
606
|
+
"target",
|
|
607
|
+
"quota",
|
|
608
|
+
"budget",
|
|
609
|
+
"limit",
|
|
610
|
+
"storage",
|
|
611
|
+
"usage",
|
|
612
|
+
"plan",
|
|
613
|
+
"course",
|
|
614
|
+
"progress",
|
|
615
|
+
"savings",
|
|
616
|
+
"fundraising",
|
|
617
|
+
"fitness",
|
|
618
|
+
"steps",
|
|
619
|
+
"workout",
|
|
620
|
+
"calories",
|
|
621
|
+
"habit"
|
|
622
|
+
],
|
|
623
|
+
"layouts": [],
|
|
624
|
+
"density": [
|
|
625
|
+
"balanced",
|
|
626
|
+
"spacious"
|
|
627
|
+
],
|
|
628
|
+
"platforms": [
|
|
629
|
+
"desktop",
|
|
630
|
+
"responsive",
|
|
631
|
+
"mobile"
|
|
632
|
+
],
|
|
633
|
+
"structure": "label | \"value / target\" | Progress bar | remaining or percent text",
|
|
634
|
+
"implementation": [
|
|
635
|
+
"Switch Progress to warning above 80% and destructive above 100% when the value is a limit."
|
|
636
|
+
],
|
|
637
|
+
"avoid": [
|
|
638
|
+
"Using it for values without a real target"
|
|
639
|
+
]
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
"id": "icon-tile",
|
|
643
|
+
"name": "Icon tile",
|
|
644
|
+
"bestFor": "Operational counts that users scan and click through: open tickets, pending orders, low stock.",
|
|
645
|
+
"signals": [
|
|
646
|
+
"tickets",
|
|
647
|
+
"orders",
|
|
648
|
+
"tasks",
|
|
649
|
+
"inventory",
|
|
650
|
+
"stock",
|
|
651
|
+
"appointments",
|
|
652
|
+
"patients",
|
|
653
|
+
"students",
|
|
654
|
+
"pending",
|
|
655
|
+
"operations",
|
|
656
|
+
"admin"
|
|
657
|
+
],
|
|
658
|
+
"layouts": [
|
|
659
|
+
"data-table",
|
|
660
|
+
"team-management"
|
|
661
|
+
],
|
|
662
|
+
"density": [
|
|
663
|
+
"compact",
|
|
664
|
+
"balanced"
|
|
665
|
+
],
|
|
666
|
+
"platforms": [
|
|
667
|
+
"desktop",
|
|
668
|
+
"responsive",
|
|
669
|
+
"mobile"
|
|
670
|
+
],
|
|
671
|
+
"structure": "rounded-lg icon square (bg-primary/10 text-primary, or a status token) | label + value stacked | optional chevron, whole card is a link",
|
|
672
|
+
"implementation": [
|
|
673
|
+
"Pick icon tint by meaning (warning for pending, destructive for overdue), not for decoration."
|
|
674
|
+
],
|
|
675
|
+
"avoid": [
|
|
676
|
+
"Four different icon colors in one row for no reason"
|
|
677
|
+
]
|
|
678
|
+
},
|
|
679
|
+
{
|
|
680
|
+
"id": "hero-metric",
|
|
681
|
+
"name": "Hero metric",
|
|
682
|
+
"bestFor": "Dashboards with one north-star number (revenue, balance, portfolio value) and a few supporting stats.",
|
|
683
|
+
"signals": [
|
|
684
|
+
"revenue",
|
|
685
|
+
"mrr",
|
|
686
|
+
"arr",
|
|
687
|
+
"balance",
|
|
688
|
+
"portfolio",
|
|
689
|
+
"net worth",
|
|
690
|
+
"sales",
|
|
691
|
+
"earnings",
|
|
692
|
+
"payout",
|
|
693
|
+
"finance",
|
|
694
|
+
"executive"
|
|
695
|
+
],
|
|
696
|
+
"layouts": [
|
|
697
|
+
"analytics-dashboard",
|
|
698
|
+
"dashboard"
|
|
699
|
+
],
|
|
700
|
+
"density": [
|
|
701
|
+
"spacious",
|
|
702
|
+
"balanced"
|
|
703
|
+
],
|
|
704
|
+
"platforms": [
|
|
705
|
+
"desktop",
|
|
706
|
+
"responsive"
|
|
707
|
+
],
|
|
708
|
+
"structure": "lg:col-span-2 Card: large value (text-4xl/5xl tabular-nums) + delta + ApexCharts area chart | 2-3 compact secondary stats beside it",
|
|
709
|
+
"implementation": [
|
|
710
|
+
"Only one hero per page. Secondary stats use number-delta or compact-strip."
|
|
711
|
+
],
|
|
712
|
+
"avoid": [
|
|
713
|
+
"Making every stat a hero"
|
|
714
|
+
]
|
|
715
|
+
},
|
|
716
|
+
{
|
|
717
|
+
"id": "compact-strip",
|
|
718
|
+
"name": "Compact stat strip",
|
|
719
|
+
"bestFor": "Dense operational screens: one Card split into columns by dividers instead of separate cards.",
|
|
720
|
+
"signals": [
|
|
721
|
+
"monitoring",
|
|
722
|
+
"uptime",
|
|
723
|
+
"latency",
|
|
724
|
+
"infra",
|
|
725
|
+
"server",
|
|
726
|
+
"devops",
|
|
727
|
+
"logs",
|
|
728
|
+
"queue",
|
|
729
|
+
"realtime",
|
|
730
|
+
"system",
|
|
731
|
+
"status",
|
|
732
|
+
"dense"
|
|
733
|
+
],
|
|
734
|
+
"layouts": [
|
|
735
|
+
"status-page",
|
|
736
|
+
"data-table"
|
|
737
|
+
],
|
|
738
|
+
"density": [
|
|
739
|
+
"compact"
|
|
740
|
+
],
|
|
741
|
+
"platforms": [
|
|
742
|
+
"desktop",
|
|
743
|
+
"responsive"
|
|
744
|
+
],
|
|
745
|
+
"structure": "single Card > CardBody > grid grid-cols-2 lg:grid-cols-4 divide-x divide-border, each cell label + value + tiny delta",
|
|
746
|
+
"implementation": [
|
|
747
|
+
"Use divide-y on the mobile 1-2 column layout so cells stay separated."
|
|
748
|
+
],
|
|
749
|
+
"avoid": [
|
|
750
|
+
"Large numbers; this variant is about density"
|
|
751
|
+
]
|
|
752
|
+
},
|
|
753
|
+
{
|
|
754
|
+
"id": "breakdown",
|
|
755
|
+
"name": "Value with breakdown",
|
|
756
|
+
"bestFor": "Totals that are meaningful only with their composition: pipeline by stage, tickets by status, traffic by source.",
|
|
757
|
+
"signals": [
|
|
758
|
+
"pipeline",
|
|
759
|
+
"deals",
|
|
760
|
+
"stage",
|
|
761
|
+
"status",
|
|
762
|
+
"distribution",
|
|
763
|
+
"breakdown",
|
|
764
|
+
"segments",
|
|
765
|
+
"sources",
|
|
766
|
+
"channels",
|
|
767
|
+
"categories"
|
|
768
|
+
],
|
|
769
|
+
"layouts": [
|
|
770
|
+
"crm-pipeline",
|
|
771
|
+
"report-builder"
|
|
772
|
+
],
|
|
773
|
+
"density": [
|
|
774
|
+
"balanced"
|
|
775
|
+
],
|
|
776
|
+
"platforms": [
|
|
777
|
+
"desktop",
|
|
778
|
+
"responsive"
|
|
779
|
+
],
|
|
780
|
+
"structure": "label + total value | segmented bar (flex row of bg-primary / bg-info / bg-warning segments with widths by share) | legend with counts",
|
|
781
|
+
"implementation": [
|
|
782
|
+
"Max 4 segments; group the rest as \"Other\"."
|
|
783
|
+
],
|
|
784
|
+
"avoid": [
|
|
785
|
+
"Pie charts inside small cards"
|
|
786
|
+
]
|
|
787
|
+
},
|
|
788
|
+
{
|
|
789
|
+
"id": "radial-score",
|
|
790
|
+
"name": "Radial score",
|
|
791
|
+
"bestFor": "Single percentage scores: health, satisfaction, completion, performance.",
|
|
792
|
+
"signals": [
|
|
793
|
+
"score",
|
|
794
|
+
"health",
|
|
795
|
+
"nps",
|
|
796
|
+
"satisfaction",
|
|
797
|
+
"csat",
|
|
798
|
+
"performance",
|
|
799
|
+
"completion",
|
|
800
|
+
"cpu",
|
|
801
|
+
"memory",
|
|
802
|
+
"rating",
|
|
803
|
+
"attendance"
|
|
804
|
+
],
|
|
805
|
+
"layouts": [],
|
|
806
|
+
"density": [
|
|
807
|
+
"balanced",
|
|
808
|
+
"spacious"
|
|
809
|
+
],
|
|
810
|
+
"platforms": [
|
|
811
|
+
"desktop",
|
|
812
|
+
"responsive",
|
|
813
|
+
"mobile"
|
|
814
|
+
],
|
|
815
|
+
"structure": "ApexCharts radialBar (height 140-180) with the percent centered | label and one-line interpretation below",
|
|
816
|
+
"implementation": [
|
|
817
|
+
"Track color from --border, value color from the status token that matches the score band."
|
|
818
|
+
],
|
|
819
|
+
"avoid": [
|
|
820
|
+
"More than three radial cards on a page"
|
|
821
|
+
]
|
|
822
|
+
}
|
|
823
|
+
]
|
|
824
|
+
},
|
|
825
|
+
"dashboardBody": {
|
|
826
|
+
"title": "Dashboard body layout",
|
|
827
|
+
"appliesTo": [
|
|
828
|
+
"dashboard",
|
|
829
|
+
"analytics-dashboard",
|
|
830
|
+
"crm-pipeline",
|
|
831
|
+
"report-builder",
|
|
832
|
+
"status-page",
|
|
833
|
+
"team-management",
|
|
834
|
+
"project-workspace"
|
|
835
|
+
],
|
|
836
|
+
"variants": [
|
|
837
|
+
{
|
|
838
|
+
"id": "kpi-chart-table",
|
|
839
|
+
"name": "KPI row, chart, table",
|
|
840
|
+
"bestFor": "General overview dashboards where users check numbers, then drill into records.",
|
|
841
|
+
"signals": [
|
|
842
|
+
"overview",
|
|
843
|
+
"admin",
|
|
844
|
+
"summary"
|
|
845
|
+
],
|
|
846
|
+
"layouts": [],
|
|
847
|
+
"density": [
|
|
848
|
+
"balanced"
|
|
849
|
+
],
|
|
850
|
+
"platforms": [
|
|
851
|
+
"desktop",
|
|
852
|
+
"responsive"
|
|
853
|
+
],
|
|
854
|
+
"structure": "stat row | lg:grid-cols-[2fr_1fr]: main chart + secondary chart or list | recent records Table",
|
|
855
|
+
"implementation": [
|
|
856
|
+
"Use this only when nothing more specific fits; it is the most overused pattern."
|
|
857
|
+
],
|
|
858
|
+
"avoid": [
|
|
859
|
+
"Four identical stat cards followed by two identical charts"
|
|
860
|
+
]
|
|
861
|
+
},
|
|
862
|
+
{
|
|
863
|
+
"id": "bento",
|
|
864
|
+
"name": "Bento grid",
|
|
865
|
+
"bestFor": "Executive or product overviews mixing one hero metric with varied tiles.",
|
|
866
|
+
"signals": [
|
|
867
|
+
"executive",
|
|
868
|
+
"overview",
|
|
869
|
+
"startup",
|
|
870
|
+
"modern",
|
|
871
|
+
"investor",
|
|
872
|
+
"founder",
|
|
873
|
+
"summary",
|
|
874
|
+
"home"
|
|
875
|
+
],
|
|
876
|
+
"layouts": [
|
|
877
|
+
"analytics-dashboard",
|
|
878
|
+
"dashboard"
|
|
879
|
+
],
|
|
880
|
+
"density": [
|
|
881
|
+
"balanced",
|
|
882
|
+
"spacious"
|
|
883
|
+
],
|
|
884
|
+
"platforms": [
|
|
885
|
+
"desktop",
|
|
886
|
+
"responsive"
|
|
887
|
+
],
|
|
888
|
+
"structure": "grid lg:grid-cols-4 auto-rows-[minmax(140px,auto)]: hero tile col-span-2 row-span-2, mixed 1x1 and 2x1 tiles (chart, list, progress, radial)",
|
|
889
|
+
"implementation": [
|
|
890
|
+
"Every tile type differs from its neighbors; collapse to 1-2 columns on mobile in priority order."
|
|
891
|
+
],
|
|
892
|
+
"avoid": [
|
|
893
|
+
"Filling tiles with decorative content"
|
|
894
|
+
]
|
|
895
|
+
},
|
|
896
|
+
{
|
|
897
|
+
"id": "main-side-rail",
|
|
898
|
+
"name": "Main column with side rail",
|
|
899
|
+
"bestFor": "Work dashboards where people act on items: tasks, approvals, upcoming events, activity.",
|
|
900
|
+
"signals": [
|
|
901
|
+
"tasks",
|
|
902
|
+
"activity",
|
|
903
|
+
"crm",
|
|
904
|
+
"projects",
|
|
905
|
+
"team",
|
|
906
|
+
"schedule",
|
|
907
|
+
"calendar",
|
|
908
|
+
"appointments",
|
|
909
|
+
"approvals",
|
|
910
|
+
"upcoming",
|
|
911
|
+
"student",
|
|
912
|
+
"teacher"
|
|
913
|
+
],
|
|
914
|
+
"layouts": [
|
|
915
|
+
"crm-pipeline",
|
|
916
|
+
"project-workspace",
|
|
917
|
+
"team-management"
|
|
918
|
+
],
|
|
919
|
+
"density": [
|
|
920
|
+
"balanced"
|
|
921
|
+
],
|
|
922
|
+
"platforms": [
|
|
923
|
+
"desktop",
|
|
924
|
+
"responsive"
|
|
925
|
+
],
|
|
926
|
+
"structure": "lg:grid-cols-[1fr_320px]: main (stats + chart + table) | side rail (upcoming List, activity feed, quick actions)",
|
|
927
|
+
"implementation": [
|
|
928
|
+
"Side rail moves below main on mobile, but its most urgent item can be pinned above."
|
|
929
|
+
],
|
|
930
|
+
"avoid": [
|
|
931
|
+
"Putting the primary data in the side rail"
|
|
932
|
+
]
|
|
933
|
+
},
|
|
934
|
+
{
|
|
935
|
+
"id": "table-first",
|
|
936
|
+
"name": "Table first",
|
|
937
|
+
"bestFor": "Operational screens where the job is working through records: orders, users, inventory, tickets.",
|
|
938
|
+
"signals": [
|
|
939
|
+
"orders",
|
|
940
|
+
"inventory",
|
|
941
|
+
"users",
|
|
942
|
+
"records",
|
|
943
|
+
"tickets",
|
|
944
|
+
"customers",
|
|
945
|
+
"products",
|
|
946
|
+
"manage",
|
|
947
|
+
"list",
|
|
948
|
+
"admin",
|
|
949
|
+
"logs"
|
|
950
|
+
],
|
|
951
|
+
"layouts": [
|
|
952
|
+
"data-table"
|
|
953
|
+
],
|
|
954
|
+
"density": [
|
|
955
|
+
"compact",
|
|
956
|
+
"balanced"
|
|
957
|
+
],
|
|
958
|
+
"platforms": [
|
|
959
|
+
"desktop",
|
|
960
|
+
"responsive"
|
|
961
|
+
],
|
|
962
|
+
"structure": "compact stat strip | filter bar (search Input, status Select, Chips) | full-width Table with bulk actions and Pagination",
|
|
963
|
+
"implementation": [
|
|
964
|
+
"Stats double as filters: clicking \"Pending 12\" filters the table."
|
|
965
|
+
],
|
|
966
|
+
"avoid": [
|
|
967
|
+
"Big charts pushing the table below the fold"
|
|
968
|
+
]
|
|
969
|
+
},
|
|
970
|
+
{
|
|
971
|
+
"id": "single-focus",
|
|
972
|
+
"name": "Single metric focus",
|
|
973
|
+
"bestFor": "Personal or monitoring dashboards built around one number over time.",
|
|
974
|
+
"signals": [
|
|
975
|
+
"personal",
|
|
976
|
+
"finance",
|
|
977
|
+
"savings",
|
|
978
|
+
"fitness",
|
|
979
|
+
"weight",
|
|
980
|
+
"health",
|
|
981
|
+
"energy",
|
|
982
|
+
"portfolio",
|
|
983
|
+
"balance",
|
|
984
|
+
"uptime",
|
|
985
|
+
"monitoring"
|
|
986
|
+
],
|
|
987
|
+
"layouts": [
|
|
988
|
+
"status-page"
|
|
989
|
+
],
|
|
990
|
+
"density": [
|
|
991
|
+
"spacious"
|
|
992
|
+
],
|
|
993
|
+
"platforms": [
|
|
994
|
+
"desktop",
|
|
995
|
+
"responsive",
|
|
996
|
+
"mobile"
|
|
997
|
+
],
|
|
998
|
+
"structure": "hero number + range Tabs (1D/1W/1M/1Y) | full-width ApexCharts area chart | breakdown List or small stat row",
|
|
999
|
+
"implementation": [
|
|
1000
|
+
"The chart is the page; keep everything else visually secondary."
|
|
1001
|
+
],
|
|
1002
|
+
"avoid": [
|
|
1003
|
+
"Adding unrelated KPI cards above the hero"
|
|
1004
|
+
]
|
|
1005
|
+
},
|
|
1006
|
+
{
|
|
1007
|
+
"id": "pipeline-board",
|
|
1008
|
+
"name": "Pipeline overview",
|
|
1009
|
+
"bestFor": "Stage-based work: sales deals, hiring, support queues, order fulfilment.",
|
|
1010
|
+
"signals": [
|
|
1011
|
+
"pipeline",
|
|
1012
|
+
"deals",
|
|
1013
|
+
"stages",
|
|
1014
|
+
"hiring",
|
|
1015
|
+
"recruiting",
|
|
1016
|
+
"candidates",
|
|
1017
|
+
"kanban",
|
|
1018
|
+
"fulfilment",
|
|
1019
|
+
"fulfillment",
|
|
1020
|
+
"queue",
|
|
1021
|
+
"leads"
|
|
1022
|
+
],
|
|
1023
|
+
"layouts": [
|
|
1024
|
+
"crm-pipeline",
|
|
1025
|
+
"kanban-board"
|
|
1026
|
+
],
|
|
1027
|
+
"density": [
|
|
1028
|
+
"balanced",
|
|
1029
|
+
"compact"
|
|
1030
|
+
],
|
|
1031
|
+
"platforms": [
|
|
1032
|
+
"desktop",
|
|
1033
|
+
"responsive"
|
|
1034
|
+
],
|
|
1035
|
+
"structure": "breakdown stat (value by stage) | horizontally scrollable stage columns with compact item Cards and per-stage totals | conversion chart below",
|
|
1036
|
+
"implementation": [
|
|
1037
|
+
"Columns scroll horizontally with snap on mobile."
|
|
1038
|
+
],
|
|
1039
|
+
"avoid": [
|
|
1040
|
+
"Duplicating stage counts in separate stat cards"
|
|
1041
|
+
]
|
|
1042
|
+
},
|
|
1043
|
+
{
|
|
1044
|
+
"id": "tabbed-sections",
|
|
1045
|
+
"name": "Tabbed sections",
|
|
1046
|
+
"bestFor": "Analytics with several distinct areas (acquisition, engagement, revenue) that would make one page too long.",
|
|
1047
|
+
"signals": [
|
|
1048
|
+
"analytics",
|
|
1049
|
+
"reports",
|
|
1050
|
+
"insights",
|
|
1051
|
+
"acquisition",
|
|
1052
|
+
"engagement",
|
|
1053
|
+
"retention",
|
|
1054
|
+
"funnel",
|
|
1055
|
+
"cohort",
|
|
1056
|
+
"marketing"
|
|
1057
|
+
],
|
|
1058
|
+
"layouts": [
|
|
1059
|
+
"analytics-dashboard",
|
|
1060
|
+
"report-builder"
|
|
1061
|
+
],
|
|
1062
|
+
"density": [
|
|
1063
|
+
"balanced"
|
|
1064
|
+
],
|
|
1065
|
+
"platforms": [
|
|
1066
|
+
"desktop",
|
|
1067
|
+
"responsive"
|
|
1068
|
+
],
|
|
1069
|
+
"structure": "header toolbar | Tabs | each tab: its own stat row variant + one primary chart + one breakdown",
|
|
1070
|
+
"implementation": [
|
|
1071
|
+
"Keep the date range outside the Tabs so it applies to all tabs."
|
|
1072
|
+
],
|
|
1073
|
+
"avoid": [
|
|
1074
|
+
"Every tab having the identical layout"
|
|
1075
|
+
]
|
|
1076
|
+
},
|
|
1077
|
+
{
|
|
1078
|
+
"id": "feed-center",
|
|
1079
|
+
"name": "Activity feed center",
|
|
1080
|
+
"bestFor": "Community, social, audit and notification-heavy products where events are the content.",
|
|
1081
|
+
"signals": [
|
|
1082
|
+
"feed",
|
|
1083
|
+
"community",
|
|
1084
|
+
"social",
|
|
1085
|
+
"notifications",
|
|
1086
|
+
"audit",
|
|
1087
|
+
"events",
|
|
1088
|
+
"timeline",
|
|
1089
|
+
"logs",
|
|
1090
|
+
"changelog",
|
|
1091
|
+
"messages"
|
|
1092
|
+
],
|
|
1093
|
+
"layouts": [],
|
|
1094
|
+
"density": [
|
|
1095
|
+
"balanced"
|
|
1096
|
+
],
|
|
1097
|
+
"platforms": [
|
|
1098
|
+
"desktop",
|
|
1099
|
+
"responsive",
|
|
1100
|
+
"mobile"
|
|
1101
|
+
],
|
|
1102
|
+
"structure": "lg:grid-cols-[1fr_2fr_1fr] or [2fr_1fr]: filters | timeline List grouped by day | summary stats",
|
|
1103
|
+
"implementation": [
|
|
1104
|
+
"Group events under sticky day headings; use Avatar + verb + object + relative time."
|
|
1105
|
+
],
|
|
1106
|
+
"avoid": [
|
|
1107
|
+
"Infinite feed without grouping"
|
|
1108
|
+
]
|
|
1109
|
+
}
|
|
1110
|
+
]
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
}
|