@hanzlaa/rcode 4.10.6 → 4.12.0
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/AGENTS.md +1 -1
- package/CLAUDE.md +1 -1
- package/CONTRIBUTING.md +5 -0
- package/cli/install.js +160 -0
- package/dist/rcode.js +254 -234
- package/package.json +1 -1
- package/rcode/agents/rcode-planner.md +1 -0
- package/rcode/agents/rcode-project-researcher.md +2 -1
- package/rcode/agents/rcode-roadmapper.md +1 -0
- package/rcode/agents/rcode-sprint-checker.md +1 -0
- package/rcode/agents/rcode-ux-designer.md +2 -0
- package/rcode/agents/rcode-verifier.md +2 -2
- package/rcode/agents/rules/planner/common-patterns.md +2 -1
- package/rcode/agents/rules/planner/goal-backward-thinking.md +33 -0
- package/rcode/agents/rules/planner/sprint-verification.md +1 -0
- package/rcode/agents/rules/planner/task-templates.md +20 -1
- package/rcode/agents/rules/project-researcher/detailed-guide.md +10 -0
- package/rcode/agents/rules/sprint-checker/dimensions.md +129 -0
- package/rcode/agents/rules/sprint-checker/process.md +12 -0
- package/rcode/agents/rules/verifier/behavioral-spot-checks.md +5 -1
- package/rcode/agents/rules/verifier/gap-output.md +5 -0
- package/rcode/agents/rules/verifier/reachability-check.md +69 -0
- package/rcode/bin/rcode-tools.cjs +91 -8
- package/rcode/commands/ui-phase.md +1 -1
- package/rcode/references/design-library/LICENSE +21 -0
- package/rcode/references/design-library/README.md +37 -0
- package/rcode/references/design-library/charts.csv +26 -0
- package/rcode/references/design-library/colors.csv +97 -0
- package/rcode/references/design-library/icons.csv +101 -0
- package/rcode/references/design-library/styles.csv +68 -0
- package/rcode/references/design-library/typography.csv +58 -0
- package/rcode/references/design-library/ui-reasoning.csv +101 -0
- package/rcode/references/design-library/ux-guidelines.csv +100 -0
- package/rcode/references/design-library/web-interface.csv +31 -0
- package/rcode/references/domain-probes.md +8 -0
- package/rcode/references/project-types.yaml +29 -0
- package/rcode/references/questioning.md +3 -0
- package/rcode/references/roadmapper-playbook.md +90 -0
- package/rcode/references/source-of-truth-grounding.md +80 -0
- package/rcode/references/sprint-checker-playbook.md +14 -0
- package/rcode/references/verifier-playbook.md +20 -7
- package/rcode/skills/actions/2-plan/rcode-create-epics-and-stories/workflow.md +1 -1
- package/rcode/skills/actions/2-plan/rcode-create-prd/workflow.md +9 -1
- package/rcode/workflows/autonomous.md +78 -16
- package/rcode/workflows/complete-milestone.md +1 -1
- package/rcode/workflows/council.md +51 -6
- package/rcode/workflows/discuss-phase.md +10 -2
- package/rcode/workflows/execute-sprint.md +35 -7
- package/rcode/workflows/execute-waves.md +2 -2
- package/rcode/workflows/execute.md +21 -6
- package/rcode/workflows/help.md +1 -1
- package/rcode/workflows/new-milestone.md +5 -1
- package/rcode/workflows/new-project-research.md +22 -0
- package/rcode/workflows/new-project-roadmap.md +19 -0
- package/rcode/workflows/plan-research-validation.md +1 -1
- package/rcode/workflows/plan.md +49 -3
- package/rcode/workflows/ship.md +22 -0
- package/rcode/workflows/ui-phase.md +187 -23
- package/rcode/workflows/ui-review.md +9 -1
- package/rcode/workflows/verify-work.md +1 -1
- package/server/lib/scanner.js +25 -4
|
@@ -1366,8 +1366,16 @@ function cmdState(subArgs) {
|
|
|
1366
1366
|
const state = readState() || defaultState();
|
|
1367
1367
|
state.milestone = val;
|
|
1368
1368
|
return writeState(state);
|
|
1369
|
+
} else if (key === '--ui-spec-path' && val) {
|
|
1370
|
+
const state = readState() || defaultState();
|
|
1371
|
+
state.ui_spec_path = val;
|
|
1372
|
+
return writeState(state);
|
|
1373
|
+
} else if (key === '--wireframes-path' && val) {
|
|
1374
|
+
const state = readState() || defaultState();
|
|
1375
|
+
state.wireframes_path = val;
|
|
1376
|
+
return writeState(state);
|
|
1369
1377
|
} else {
|
|
1370
|
-
throw new Error(`Unknown state set key: ${key}. Use: set-phase <N>, or state set project|milestone <value>`);
|
|
1378
|
+
throw new Error(`Unknown state set key: ${key}. Use: set-phase <N>, or state set project|milestone|--ui-spec-path|--wireframes-path <value>`);
|
|
1371
1379
|
}
|
|
1372
1380
|
}
|
|
1373
1381
|
|
|
@@ -3211,6 +3219,11 @@ function cmdState(subArgs) {
|
|
|
3211
3219
|
return { updated: true, phase: phaseKey, status: 'executing', previous_status: previousStatus };
|
|
3212
3220
|
}
|
|
3213
3221
|
|
|
3222
|
+
// DEPRECATED (#gap: state-sync audit): no workflow calls this — every
|
|
3223
|
+
// completion path uses the top-level `phase complete <N>` subcommand
|
|
3224
|
+
// instead. Its stale-executing-phase hygiene warning was ported there.
|
|
3225
|
+
// Kept only for backward compatibility with anyone scripting against it
|
|
3226
|
+
// directly; do not wire new callers to this — use `phase complete`.
|
|
3214
3227
|
if (sub === 'complete-phase') {
|
|
3215
3228
|
const flags = parseFlags(1);
|
|
3216
3229
|
if (!flags.phase) throw new Error('complete-phase requires --phase <N>');
|
|
@@ -3405,9 +3418,20 @@ function cmdState(subArgs) {
|
|
|
3405
3418
|
// landed as 'planned' regardless of what the doc said.
|
|
3406
3419
|
function normalizeStatus(raw) {
|
|
3407
3420
|
if (!raw) return 'planned';
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
|
|
3421
|
+
// Match on the LEADING word, not exact string equality — ROADMAP.md
|
|
3422
|
+
// status lines legitimately carry trailing detail beyond the bare
|
|
3423
|
+
// status word (e.g. "Complete (verification: human_needed — live
|
|
3424
|
+
// deploy deferred)"), which an exact-match check silently drops to
|
|
3425
|
+
// 'planned' since the full string never equals 'complete'. A real
|
|
3426
|
+
// "Complete (...)" phase would then look un-synced forever.
|
|
3427
|
+
// Strip trailing detail (anything from the first paren/colon/em-dash
|
|
3428
|
+
// onward — "(verification: ...)", ": some note") before matching, then
|
|
3429
|
+
// collapse whitespace/underscores so "Complete (...)", "In Progress",
|
|
3430
|
+
// and "in_progress" all normalize the same way.
|
|
3431
|
+
const leading = String(raw).toLowerCase().replace(/[✅]/g, '')
|
|
3432
|
+
.split(/[(:—]/)[0].trim().replace(/[\s_]+/g, '');
|
|
3433
|
+
if (['complete','completed','shipped','verified','done'].includes(leading)) return 'complete';
|
|
3434
|
+
if (['executing','inprogress','active','started'].includes(leading)) return 'in_progress';
|
|
3411
3435
|
return 'planned';
|
|
3412
3436
|
}
|
|
3413
3437
|
|
|
@@ -3430,7 +3454,43 @@ function cmdState(subArgs) {
|
|
|
3430
3454
|
// Status precedence for advancement: complete > in_progress > planned.
|
|
3431
3455
|
// A phase should never be downgraded by ROADMAP re-sync.
|
|
3432
3456
|
const statusRank = { complete: 2, in_progress: 1, planned: 0 };
|
|
3433
|
-
|
|
3457
|
+
let incomingStatus = normalizeStatus(phaseStatus);
|
|
3458
|
+
|
|
3459
|
+
// Cross-check against VERIFICATION.md before trusting a 'complete' claim
|
|
3460
|
+
// from ROADMAP prose. A phase can be hand-edited to say "Complete" (or
|
|
3461
|
+
// "gaps_found → closed") without ever re-running the verifier — confirmed
|
|
3462
|
+
// live: an agent wrote that exact phrase into ROADMAP.md while the phase's
|
|
3463
|
+
// own VERIFICATION.md frontmatter still said `status: gaps_found`,
|
|
3464
|
+
// bypassing execute.md's uat_gate entirely via a direct file edit. Don't
|
|
3465
|
+
// let a prose claim override what the actual verification artifact says.
|
|
3466
|
+
if (incomingStatus === 'complete') {
|
|
3467
|
+
try {
|
|
3468
|
+
const phasesRootDir = path.join(PLANNING_DIR, 'phases');
|
|
3469
|
+
const phaseDirName = fs.existsSync(phasesRootDir)
|
|
3470
|
+
? fs.readdirSync(phasesRootDir).find(d => d === phaseNum || d.startsWith(`${phaseNum}-`))
|
|
3471
|
+
: null;
|
|
3472
|
+
if (phaseDirName) {
|
|
3473
|
+
const verFile = fs.readdirSync(path.join(phasesRootDir, phaseDirName))
|
|
3474
|
+
.find(f => /-VERIFICATION\.md$/i.test(f));
|
|
3475
|
+
if (verFile) {
|
|
3476
|
+
const verText = fs.readFileSync(path.join(phasesRootDir, phaseDirName, verFile), 'utf8');
|
|
3477
|
+
const verStatusMatch = verText.match(/^status:\s*(\S+)/m);
|
|
3478
|
+
const verStatus = verStatusMatch ? verStatusMatch[1].trim() : null;
|
|
3479
|
+
if (verStatus && verStatus !== 'passed') {
|
|
3480
|
+
incomingStatus = 'in_progress';
|
|
3481
|
+
parsed.unverified_complete_claims = parsed.unverified_complete_claims || [];
|
|
3482
|
+
parsed.unverified_complete_claims.push({
|
|
3483
|
+
phase: phaseNum,
|
|
3484
|
+
roadmap_claim: phaseStatus,
|
|
3485
|
+
verification_file: verFile,
|
|
3486
|
+
verification_status: verStatus,
|
|
3487
|
+
});
|
|
3488
|
+
}
|
|
3489
|
+
}
|
|
3490
|
+
}
|
|
3491
|
+
} catch { /* best-effort cross-check — never fail sync over it */ }
|
|
3492
|
+
}
|
|
3493
|
+
|
|
3434
3494
|
if (existingIdx >= 0) {
|
|
3435
3495
|
// Backfill both id and number so future readers using either schema find it.
|
|
3436
3496
|
state.phases[existingIdx].number = state.phases[existingIdx].number || phaseNum;
|
|
@@ -3946,6 +4006,29 @@ function cmdPhase(subArgs) {
|
|
|
3946
4006
|
throw new Error(`Phase "${phaseRef}" not found in state.phases (looked up by number, id, and name)`);
|
|
3947
4007
|
}
|
|
3948
4008
|
const previous = state.phases[idx].status || null;
|
|
4009
|
+
|
|
4010
|
+
// State-hygiene gate (#955): if an earlier-numbered phase is still stuck
|
|
4011
|
+
// 'executing' while this later phase gets marked complete, that's exactly
|
|
4012
|
+
// the drift that misorients resolveActivePhase() / the SessionStart greeter.
|
|
4013
|
+
// Warn rather than block — completing out of order is sometimes correct
|
|
4014
|
+
// (parallel workstreams), but it must never happen silently. (Ported from
|
|
4015
|
+
// the unused `state complete-phase` twin — this is the code path every
|
|
4016
|
+
// workflow actually calls.)
|
|
4017
|
+
const thisNum = parseInt(String(state.phases[idx].number || phaseRef), 10);
|
|
4018
|
+
const stalePhases = Number.isNaN(thisNum) ? [] : state.phases.filter((p) => {
|
|
4019
|
+
if (!p || p.status !== 'executing') return false;
|
|
4020
|
+
const n = parseInt(String(p.number ?? p.id), 10);
|
|
4021
|
+
return !Number.isNaN(n) && n < thisNum;
|
|
4022
|
+
});
|
|
4023
|
+
const warnings = [];
|
|
4024
|
+
if (stalePhases.length > 0) {
|
|
4025
|
+
const staleList = stalePhases.map((p) => p.number ?? p.id).join(', ');
|
|
4026
|
+
warnings.push(
|
|
4027
|
+
`Phase ${phaseRef} marked complete while earlier phase(s) ${staleList} are still 'executing'. ` +
|
|
4028
|
+
`Close out the stale phase(s) or confirm this is an intentional parallel workstream.`
|
|
4029
|
+
);
|
|
4030
|
+
}
|
|
4031
|
+
|
|
3949
4032
|
state.phases[idx].status = 'complete';
|
|
3950
4033
|
state.phases[idx].status_updated = new Date().toISOString();
|
|
3951
4034
|
state.phases[idx].completed_at = state.phases[idx].completed_at || new Date().toISOString().slice(0, 10);
|
|
@@ -3979,8 +4062,8 @@ function cmdPhase(subArgs) {
|
|
|
3979
4062
|
is_last_phase: !next,
|
|
3980
4063
|
open_phases_remaining: openRemaining,
|
|
3981
4064
|
...(nudge ? { nudge } : {}),
|
|
3982
|
-
warnings
|
|
3983
|
-
has_warnings:
|
|
4065
|
+
warnings,
|
|
4066
|
+
has_warnings: warnings.length > 0,
|
|
3984
4067
|
};
|
|
3985
4068
|
}
|
|
3986
4069
|
|
|
@@ -4624,7 +4707,7 @@ When creating, planning, or modifying a phase, you MUST go through the rcode too
|
|
|
4624
4707
|
|
|
4625
4708
|
**Why this is enforced**: every direct \`Write\` to \`.planning/phases/**/SPRINT.md\` without registration is a silent state divergence. Future \`/rcode-status\` reports under-count work. \`/rcode-execute\` can't find the plan. \`/rcode-progress\` shows wrong percentages.
|
|
4626
4709
|
|
|
4627
|
-
If you have a real reason to bypass (e.g. retroactively documenting a phase that already shipped), put \`<!-- rcode-bypass: <one-line reason> -->\` at the top of the file so it's auditable later.
|
|
4710
|
+
If you have a real reason to bypass (e.g. retroactively documenting a phase that already shipped), put \`<!-- rcode-bypass: <one-line reason> -->\` at the top of the file so it's auditable later. **This rule is currently convention, not mechanically enforced** — no hook blocks an unregistered direct write today, so following it is on you (and any agent reading this), not a safety net catching you if you don't.
|
|
4628
4711
|
|
|
4629
4712
|
---
|
|
4630
4713
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: rcode-ui-phase
|
|
3
|
-
description: Produce UI-SPEC.md
|
|
3
|
+
description: Produce UI-SPEC.md (color tokens, typography, component inventory, interaction states, accessibility guidelines) and WIREFRAMES.md (per-role screen inventory with loading/empty/error states). Detects frontend keywords and suggests this command early in plan.md if UI-SPEC.md is absent.
|
|
4
4
|
argument-hint: "[--existing-ui <path>] [--design-system <path>]"
|
|
5
5
|
allowed-tools: Agent, Read, Glob, Grep, Write
|
|
6
6
|
---
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Next Level Builder
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# Design Library
|
|
2
|
+
|
|
3
|
+
Reference data consulted by `rcode-ux-designer` and `/rcode-ui-phase` when
|
|
4
|
+
producing UI-SPEC.md and WIREFRAMES.md — style/palette/typography options with
|
|
5
|
+
concrete values, UX do/don't rules per interface pattern, and category→pattern
|
|
6
|
+
decision rules for picking a design direction that fits the project, instead
|
|
7
|
+
of an agent inventing tokens from scratch.
|
|
8
|
+
|
|
9
|
+
## Source and license
|
|
10
|
+
|
|
11
|
+
Vendored from [ui-ux-pro-max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
|
|
12
|
+
by Next Level Builder, MIT licensed. Copyright (c) 2024 Next Level Builder.
|
|
13
|
+
Full license text: `LICENSE` in this directory. Data only — the upstream
|
|
14
|
+
project's Python CLI/scripts are not vendored; rcode agents read these CSVs
|
|
15
|
+
directly via Read/Grep, no Python dependency required.
|
|
16
|
+
|
|
17
|
+
## Files
|
|
18
|
+
|
|
19
|
+
| File | Contents |
|
|
20
|
+
|---|---|
|
|
21
|
+
| `styles.csv` | 67 UI style categories (Minimalism, Neumorphism, Glassmorphism, Brutalism, etc.) — keywords, color palette, effects, best-for/avoid-for, accessibility rating, framework compatibility, implementation checklist |
|
|
22
|
+
| `colors.csv` | Palette options with hex values and mood/use-case |
|
|
23
|
+
| `typography.csv` | Font pairings with scale, weight, and use-case |
|
|
24
|
+
| `ux-guidelines.csv` | Do/don't rules by category (Navigation, Forms, etc.) with good/bad code examples and severity |
|
|
25
|
+
| `ui-reasoning.csv` | Project-category → recommended pattern/style/color-mood/typography-mood decision rules, with anti-patterns to avoid |
|
|
26
|
+
| `web-interface.csv` | Web-specific interface pattern guidance |
|
|
27
|
+
| `icons.csv` | Icon system/library options |
|
|
28
|
+
| `charts.csv` | Chart/data-viz pattern options |
|
|
29
|
+
|
|
30
|
+
## How to use
|
|
31
|
+
|
|
32
|
+
Don't dump these into a prompt wholesale — they're too large. Grep for the
|
|
33
|
+
project's category/type in `ui-reasoning.csv` first to get a recommended
|
|
34
|
+
style + color mood + typography mood, then look up the specific style's row
|
|
35
|
+
in `styles.csv` for concrete values, then check `ux-guidelines.csv` for the
|
|
36
|
+
do/don't rules relevant to the screens being designed (Navigation, Forms,
|
|
37
|
+
etc.). See `rcode/workflows/ui-phase.md` for the concrete lookup sequence.
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
|
|
2
|
+
1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
|
|
3
|
+
2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
|
|
4
|
+
3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
|
|
5
|
+
4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
|
|
6
|
+
5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
|
|
7
|
+
6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
|
|
8
|
+
7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
|
|
9
|
+
8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
|
|
10
|
+
9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
|
|
11
|
+
10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
|
|
12
|
+
11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
|
|
13
|
+
12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
|
|
14
|
+
13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
|
|
15
|
+
14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
|
|
16
|
+
15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
|
|
17
|
+
16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
|
|
18
|
+
17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
|
|
19
|
+
18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
|
|
20
|
+
19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
|
|
21
|
+
20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
|
|
22
|
+
21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
|
|
23
|
+
22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
|
|
24
|
+
23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS
|
|
25
|
+
24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
|
|
26
|
+
25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
No,Product Type,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex),Text (Hex),Border (Hex),Notes
|
|
2
|
+
1,SaaS (General),#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust blue + orange CTA contrast
|
|
3
|
+
2,Micro SaaS,#6366F1,#818CF8,#10B981,#F5F3FF,#1E1B4B,#E0E7FF,Indigo primary + emerald CTA
|
|
4
|
+
3,E-commerce,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Success green + urgency orange
|
|
5
|
+
4,E-commerce Luxury,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium dark + gold accent
|
|
6
|
+
5,Service Landing Page,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue trust + warm CTA
|
|
7
|
+
6,B2B Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional navy + blue CTA
|
|
8
|
+
7,Financial Dashboard,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Dark bg + green positive indicators
|
|
9
|
+
8,Analytics Dashboard,#1E40AF,#3B82F6,#F59E0B,#F8FAFC,#1E3A8A,#DBEAFE,Blue data + amber highlights
|
|
10
|
+
9,Healthcare App,#0891B2,#22D3EE,#059669,#ECFEFF,#164E63,#A5F3FC,Calm cyan + health green
|
|
11
|
+
10,Educational App,#4F46E5,#818CF8,#F97316,#EEF2FF,#1E1B4B,#C7D2FE,Playful indigo + energetic orange
|
|
12
|
+
11,Creative Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + cyan accent
|
|
13
|
+
12,Portfolio/Personal,#18181B,#3F3F46,#2563EB,#FAFAFA,#09090B,#E4E4E7,Monochrome + blue accent
|
|
14
|
+
13,Gaming,#7C3AED,#A78BFA,#F43F5E,#0F0F23,#E2E8F0,#4C1D95,Neon purple + rose action
|
|
15
|
+
14,Government/Public Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,High contrast navy + blue
|
|
16
|
+
15,Fintech/Crypto,#F59E0B,#FBBF24,#8B5CF6,#0F172A,#F8FAFC,#334155,Gold trust + purple tech
|
|
17
|
+
16,Social Media App,#E11D48,#FB7185,#2563EB,#FFF1F2,#881337,#FECDD3,Vibrant rose + engagement blue
|
|
18
|
+
17,Productivity Tool,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Teal focus + action orange
|
|
19
|
+
18,Design System/Component Library,#4F46E5,#6366F1,#F97316,#EEF2FF,#312E81,#C7D2FE,Indigo brand + doc hierarchy
|
|
20
|
+
19,AI/Chatbot Platform,#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,AI purple + cyan interactions
|
|
21
|
+
20,NFT/Web3 Platform,#8B5CF6,#A78BFA,#FBBF24,#0F0F23,#F8FAFC,#4C1D95,Purple tech + gold value
|
|
22
|
+
21,Creator Economy Platform,#EC4899,#F472B6,#F97316,#FDF2F8,#831843,#FBCFE8,Creator pink + engagement orange
|
|
23
|
+
22,Sustainability/ESG Platform,#059669,#10B981,#0891B2,#ECFDF5,#064E3B,#A7F3D0,Nature green + ocean blue
|
|
24
|
+
23,Remote Work/Collaboration Tool,#6366F1,#818CF8,#10B981,#F5F3FF,#312E81,#E0E7FF,Calm indigo + success green
|
|
25
|
+
24,Mental Health App,#8B5CF6,#C4B5FD,#10B981,#FAF5FF,#4C1D95,#EDE9FE,Calming lavender + wellness green
|
|
26
|
+
25,Pet Tech App,#F97316,#FB923C,#2563EB,#FFF7ED,#9A3412,#FED7AA,Playful orange + trust blue
|
|
27
|
+
26,Smart Home/IoT Dashboard,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Dark tech + status green
|
|
28
|
+
27,EV/Charging Ecosystem,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Electric cyan + eco green
|
|
29
|
+
28,Subscription Box Service,#D946EF,#E879F9,#F97316,#FDF4FF,#86198F,#F5D0FE,Excitement purple + urgency orange
|
|
30
|
+
29,Podcast Platform,#1E1B4B,#312E81,#F97316,#0F0F23,#F8FAFC,#4338CA,Dark audio + warm accent
|
|
31
|
+
30,Dating App,#E11D48,#FB7185,#F97316,#FFF1F2,#881337,#FECDD3,Romantic rose + warm orange
|
|
32
|
+
31,Micro-Credentials/Badges Platform,#0369A1,#0EA5E9,#CA8A04,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + achievement gold
|
|
33
|
+
32,Knowledge Base/Documentation,#475569,#64748B,#2563EB,#F8FAFC,#1E293B,#E2E8F0,Neutral grey + link blue
|
|
34
|
+
33,Hyperlocal Services,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Location green + action orange
|
|
35
|
+
34,Beauty/Spa/Wellness Service,#EC4899,#F9A8D4,#8B5CF6,#FDF2F8,#831843,#FBCFE8,Soft pink + lavender luxury
|
|
36
|
+
35,Luxury/Premium Brand,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium black + gold accent
|
|
37
|
+
36,Restaurant/Food Service,#DC2626,#F87171,#CA8A04,#FEF2F2,#450A0A,#FECACA,Appetizing red + warm gold
|
|
38
|
+
37,Fitness/Gym App,#F97316,#FB923C,#22C55E,#1F2937,#F8FAFC,#374151,Energy orange + success green
|
|
39
|
+
38,Real Estate/Property,#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Trust teal + professional blue
|
|
40
|
+
39,Travel/Tourism Agency,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue + adventure orange
|
|
41
|
+
40,Hotel/Hospitality,#1E3A8A,#3B82F6,#CA8A04,#F8FAFC,#1E40AF,#BFDBFE,Luxury navy + gold service
|
|
42
|
+
41,Wedding/Event Planning,#DB2777,#F472B6,#CA8A04,#FDF2F8,#831843,#FBCFE8,Romantic pink + elegant gold
|
|
43
|
+
42,Legal Services,#1E3A8A,#1E40AF,#B45309,#F8FAFC,#0F172A,#CBD5E1,Authority navy + trust gold
|
|
44
|
+
43,Insurance Platform,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Security blue + protected green
|
|
45
|
+
44,Banking/Traditional Finance,#0F172A,#1E3A8A,#CA8A04,#F8FAFC,#020617,#E2E8F0,Trust navy + premium gold
|
|
46
|
+
45,Online Course/E-learning,#0D9488,#2DD4BF,#F97316,#F0FDFA,#134E4A,#5EEAD4,Progress teal + achievement orange
|
|
47
|
+
46,Non-profit/Charity,#0891B2,#22D3EE,#F97316,#ECFEFF,#164E63,#A5F3FC,Compassion blue + action orange
|
|
48
|
+
47,Music Streaming,#1E1B4B,#4338CA,#22C55E,#0F0F23,#F8FAFC,#312E81,Dark audio + play green
|
|
49
|
+
48,Video Streaming/OTT,#0F0F23,#1E1B4B,#E11D48,#000000,#F8FAFC,#312E81,Cinema dark + play red
|
|
50
|
+
49,Job Board/Recruitment,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Professional blue + success green
|
|
51
|
+
50,Marketplace (P2P),#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Trust purple + transaction green
|
|
52
|
+
51,Logistics/Delivery,#2563EB,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Tracking blue + delivery orange
|
|
53
|
+
52,Agriculture/Farm Tech,#15803D,#22C55E,#CA8A04,#F0FDF4,#14532D,#BBF7D0,Earth green + harvest gold
|
|
54
|
+
53,Construction/Architecture,#64748B,#94A3B8,#F97316,#F8FAFC,#334155,#E2E8F0,Industrial grey + safety orange
|
|
55
|
+
54,Automotive/Car Dealership,#1E293B,#334155,#DC2626,#F8FAFC,#0F172A,#E2E8F0,Premium dark + action red
|
|
56
|
+
55,Photography Studio,#18181B,#27272A,#F8FAFC,#000000,#FAFAFA,#3F3F46,Pure black + white contrast
|
|
57
|
+
56,Coworking Space,#F59E0B,#FBBF24,#2563EB,#FFFBEB,#78350F,#FDE68A,Energetic amber + booking blue
|
|
58
|
+
57,Cleaning Service,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Fresh cyan + clean green
|
|
59
|
+
58,Home Services (Plumber/Electrician),#1E40AF,#3B82F6,#F97316,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + urgent orange
|
|
60
|
+
59,Childcare/Daycare,#F472B6,#FBCFE8,#22C55E,#FDF2F8,#9D174D,#FCE7F3,Soft pink + safe green
|
|
61
|
+
60,Senior Care/Elderly,#0369A1,#38BDF8,#22C55E,#F0F9FF,#0C4A6E,#E0F2FE,Calm blue + reassuring green
|
|
62
|
+
61,Medical Clinic,#0891B2,#22D3EE,#22C55E,#F0FDFA,#134E4A,#CCFBF1,Medical teal + health green
|
|
63
|
+
62,Pharmacy/Drug Store,#15803D,#22C55E,#0369A1,#F0FDF4,#14532D,#BBF7D0,Pharmacy green + trust blue
|
|
64
|
+
63,Dental Practice,#0EA5E9,#38BDF8,#FBBF24,#F0F9FF,#0C4A6E,#BAE6FD,Fresh blue + smile yellow
|
|
65
|
+
64,Veterinary Clinic,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Caring teal + warm orange
|
|
66
|
+
65,Florist/Plant Shop,#15803D,#22C55E,#EC4899,#F0FDF4,#14532D,#BBF7D0,Natural green + floral pink
|
|
67
|
+
66,Bakery/Cafe,#92400E,#B45309,#F8FAFC,#FEF3C7,#78350F,#FDE68A,Warm brown + cream white
|
|
68
|
+
67,Coffee Shop,#78350F,#92400E,#FBBF24,#FEF3C7,#451A03,#FDE68A,Coffee brown + warm gold
|
|
69
|
+
68,Brewery/Winery,#7C2D12,#B91C1C,#CA8A04,#FEF2F2,#450A0A,#FECACA,Deep burgundy + craft gold
|
|
70
|
+
69,Airline,#1E3A8A,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Sky blue + booking orange
|
|
71
|
+
70,News/Media Platform,#DC2626,#EF4444,#1E40AF,#FEF2F2,#450A0A,#FECACA,Breaking red + link blue
|
|
72
|
+
71,Magazine/Blog,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Editorial black + accent pink
|
|
73
|
+
72,Freelancer Platform,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Creative indigo + hire green
|
|
74
|
+
73,Consulting Firm,#0F172A,#334155,#CA8A04,#F8FAFC,#020617,#E2E8F0,Authority navy + premium gold
|
|
75
|
+
74,Marketing Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + creative cyan
|
|
76
|
+
75,Event Management,#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Excitement purple + action orange
|
|
77
|
+
76,Conference/Webinar Platform,#1E40AF,#3B82F6,#22C55E,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + join green
|
|
78
|
+
77,Membership/Community,#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Community purple + join green
|
|
79
|
+
78,Newsletter Platform,#0369A1,#0EA5E9,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + subscribe orange
|
|
80
|
+
79,Digital Products/Downloads,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Digital indigo + buy green
|
|
81
|
+
80,Church/Religious Organization,#7C3AED,#A78BFA,#CA8A04,#FAF5FF,#4C1D95,#DDD6FE,Spiritual purple + warm gold
|
|
82
|
+
81,Sports Team/Club,#DC2626,#EF4444,#FBBF24,#FEF2F2,#7F1D1D,#FECACA,Team red + championship gold
|
|
83
|
+
82,Museum/Gallery,#18181B,#27272A,#F8FAFC,#FAFAFA,#09090B,#E4E4E7,Gallery black + white space
|
|
84
|
+
83,Theater/Cinema,#1E1B4B,#312E81,#CA8A04,#0F0F23,#F8FAFC,#4338CA,Dramatic dark + spotlight gold
|
|
85
|
+
84,Language Learning App,#4F46E5,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Learning indigo + progress green
|
|
86
|
+
85,Coding Bootcamp,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Terminal dark + success green
|
|
87
|
+
86,Cybersecurity Platform,#00FF41,#0D0D0D,#FF3333,#000000,#E0E0E0,#1F1F1F,Matrix green + alert red
|
|
88
|
+
87,Developer Tool / IDE,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Code dark + run green
|
|
89
|
+
88,Biotech / Life Sciences,#0EA5E9,#0284C7,#10B981,#F0F9FF,#0C4A6E,#BAE6FD,DNA blue + life green
|
|
90
|
+
89,Space Tech / Aerospace,#F8FAFC,#94A3B8,#3B82F6,#0B0B10,#F8FAFC,#1E293B,Star white + launch blue
|
|
91
|
+
90,Architecture / Interior,#171717,#404040,#D4AF37,#FFFFFF,#171717,#E5E5E5,Minimal black + accent gold
|
|
92
|
+
91,Quantum Computing,#00FFFF,#7B61FF,#FF00FF,#050510,#E0E0FF,#333344,Quantum cyan + interference purple
|
|
93
|
+
92,Biohacking / Longevity,#FF4D4D,#4D94FF,#00E676,#F5F5F7,#1C1C1E,#E5E5EA,Bio red/blue + vitality green
|
|
94
|
+
93,Autonomous Systems,#00FF41,#008F11,#FF3333,#0D1117,#E6EDF3,#30363D,Terminal green + alert red
|
|
95
|
+
94,Generative AI Art,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Canvas neutral + creative pink
|
|
96
|
+
95,Spatial / Vision OS,#FFFFFF,#E5E5E5,#007AFF,#888888,#000000,#CCCCCC,Glass white + system blue
|
|
97
|
+
96,Climate Tech,#059669,#10B981,#FBBF24,#ECFDF5,#064E3B,#A7F3D0,Nature green + solar gold
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
No,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style
|
|
2
|
+
1,Navigation,menu,hamburger menu navigation toggle bars,Lucide,import { Menu } from 'lucide-react',<Menu />,Mobile navigation drawer toggle sidebar,Outline
|
|
3
|
+
2,Navigation,arrow-left,back previous return navigate,Lucide,import { ArrowLeft } from 'lucide-react',<ArrowLeft />,Back button breadcrumb navigation,Outline
|
|
4
|
+
3,Navigation,arrow-right,next forward continue navigate,Lucide,import { ArrowRight } from 'lucide-react',<ArrowRight />,Forward button next step CTA,Outline
|
|
5
|
+
4,Navigation,chevron-down,dropdown expand accordion select,Lucide,import { ChevronDown } from 'lucide-react',<ChevronDown />,Dropdown toggle accordion header,Outline
|
|
6
|
+
5,Navigation,chevron-up,collapse close accordion minimize,Lucide,import { ChevronUp } from 'lucide-react',<ChevronUp />,Accordion collapse minimize,Outline
|
|
7
|
+
6,Navigation,home,homepage main dashboard start,Lucide,import { Home } from 'lucide-react',<Home />,Home navigation main page,Outline
|
|
8
|
+
7,Navigation,x,close cancel dismiss remove exit,Lucide,import { X } from 'lucide-react',<X />,Modal close dismiss button,Outline
|
|
9
|
+
8,Navigation,external-link,open new tab external link,Lucide,import { ExternalLink } from 'lucide-react',<ExternalLink />,External link indicator,Outline
|
|
10
|
+
9,Action,plus,add create new insert,Lucide,import { Plus } from 'lucide-react',<Plus />,Add button create new item,Outline
|
|
11
|
+
10,Action,minus,remove subtract decrease delete,Lucide,import { Minus } from 'lucide-react',<Minus />,Remove item quantity decrease,Outline
|
|
12
|
+
11,Action,trash-2,delete remove discard bin,Lucide,import { Trash2 } from 'lucide-react',<Trash2 />,Delete action destructive,Outline
|
|
13
|
+
12,Action,edit,pencil modify change update,Lucide,import { Edit } from 'lucide-react',<Edit />,Edit button modify content,Outline
|
|
14
|
+
13,Action,save,disk store persist save,Lucide,import { Save } from 'lucide-react',<Save />,Save button persist changes,Outline
|
|
15
|
+
14,Action,download,export save file download,Lucide,import { Download } from 'lucide-react',<Download />,Download file export,Outline
|
|
16
|
+
15,Action,upload,import file attach upload,Lucide,import { Upload } from 'lucide-react',<Upload />,Upload file import,Outline
|
|
17
|
+
16,Action,copy,duplicate clipboard paste,Lucide,import { Copy } from 'lucide-react',<Copy />,Copy to clipboard,Outline
|
|
18
|
+
17,Action,share,social distribute send,Lucide,import { Share } from 'lucide-react',<Share />,Share button social,Outline
|
|
19
|
+
18,Action,search,find lookup filter query,Lucide,import { Search } from 'lucide-react',<Search />,Search input bar,Outline
|
|
20
|
+
19,Action,filter,sort refine narrow options,Lucide,import { Filter } from 'lucide-react',<Filter />,Filter dropdown sort,Outline
|
|
21
|
+
20,Action,settings,gear cog preferences config,Lucide,import { Settings } from 'lucide-react',<Settings />,Settings page configuration,Outline
|
|
22
|
+
21,Status,check,success done complete verified,Lucide,import { Check } from 'lucide-react',<Check />,Success state checkmark,Outline
|
|
23
|
+
22,Status,check-circle,success verified approved complete,Lucide,import { CheckCircle } from 'lucide-react',<CheckCircle />,Success badge verified,Outline
|
|
24
|
+
23,Status,x-circle,error failed cancel rejected,Lucide,import { XCircle } from 'lucide-react',<XCircle />,Error state failed,Outline
|
|
25
|
+
24,Status,alert-triangle,warning caution attention danger,Lucide,import { AlertTriangle } from 'lucide-react',<AlertTriangle />,Warning message caution,Outline
|
|
26
|
+
25,Status,alert-circle,info notice information help,Lucide,import { AlertCircle } from 'lucide-react',<AlertCircle />,Info notice alert,Outline
|
|
27
|
+
26,Status,info,information help tooltip details,Lucide,import { Info } from 'lucide-react',<Info />,Information tooltip help,Outline
|
|
28
|
+
27,Status,loader,loading spinner processing wait,Lucide,import { Loader } from 'lucide-react',<Loader className="animate-spin" />,Loading state spinner,Outline
|
|
29
|
+
28,Status,clock,time schedule pending wait,Lucide,import { Clock } from 'lucide-react',<Clock />,Pending time schedule,Outline
|
|
30
|
+
29,Communication,mail,email message inbox letter,Lucide,import { Mail } from 'lucide-react',<Mail />,Email contact inbox,Outline
|
|
31
|
+
30,Communication,message-circle,chat comment bubble conversation,Lucide,import { MessageCircle } from 'lucide-react',<MessageCircle />,Chat comment message,Outline
|
|
32
|
+
31,Communication,phone,call mobile telephone contact,Lucide,import { Phone } from 'lucide-react',<Phone />,Phone contact call,Outline
|
|
33
|
+
32,Communication,send,submit dispatch message airplane,Lucide,import { Send } from 'lucide-react',<Send />,Send message submit,Outline
|
|
34
|
+
33,Communication,bell,notification alert ring reminder,Lucide,import { Bell } from 'lucide-react',<Bell />,Notification bell alert,Outline
|
|
35
|
+
34,User,user,profile account person avatar,Lucide,import { User } from 'lucide-react',<User />,User profile account,Outline
|
|
36
|
+
35,User,users,team group people members,Lucide,import { Users } from 'lucide-react',<Users />,Team group members,Outline
|
|
37
|
+
36,User,user-plus,add invite new member,Lucide,import { UserPlus } from 'lucide-react',<UserPlus />,Add user invite,Outline
|
|
38
|
+
37,User,log-in,signin authenticate enter,Lucide,import { LogIn } from 'lucide-react',<LogIn />,Login signin,Outline
|
|
39
|
+
38,User,log-out,signout exit leave logout,Lucide,import { LogOut } from 'lucide-react',<LogOut />,Logout signout,Outline
|
|
40
|
+
39,Media,image,photo picture gallery thumbnail,Lucide,import { Image } from 'lucide-react',<Image />,Image photo gallery,Outline
|
|
41
|
+
40,Media,video,movie film play record,Lucide,import { Video } from 'lucide-react',<Video />,Video player media,Outline
|
|
42
|
+
41,Media,play,start video audio media,Lucide,import { Play } from 'lucide-react',<Play />,Play button video audio,Outline
|
|
43
|
+
42,Media,pause,stop halt video audio,Lucide,import { Pause } from 'lucide-react',<Pause />,Pause button media,Outline
|
|
44
|
+
43,Media,volume-2,sound audio speaker music,Lucide,import { Volume2 } from 'lucide-react',<Volume2 />,Volume audio sound,Outline
|
|
45
|
+
44,Media,mic,microphone record voice audio,Lucide,import { Mic } from 'lucide-react',<Mic />,Microphone voice record,Outline
|
|
46
|
+
45,Media,camera,photo capture snapshot picture,Lucide,import { Camera } from 'lucide-react',<Camera />,Camera photo capture,Outline
|
|
47
|
+
46,Commerce,shopping-cart,cart checkout basket buy,Lucide,import { ShoppingCart } from 'lucide-react',<ShoppingCart />,Shopping cart e-commerce,Outline
|
|
48
|
+
47,Commerce,shopping-bag,purchase buy store bag,Lucide,import { ShoppingBag } from 'lucide-react',<ShoppingBag />,Shopping bag purchase,Outline
|
|
49
|
+
48,Commerce,credit-card,payment card checkout stripe,Lucide,import { CreditCard } from 'lucide-react',<CreditCard />,Payment credit card,Outline
|
|
50
|
+
49,Commerce,dollar-sign,money price currency cost,Lucide,import { DollarSign } from 'lucide-react',<DollarSign />,Price money currency,Outline
|
|
51
|
+
50,Commerce,tag,label price discount sale,Lucide,import { Tag } from 'lucide-react',<Tag />,Price tag label,Outline
|
|
52
|
+
51,Commerce,gift,present reward bonus offer,Lucide,import { Gift } from 'lucide-react',<Gift />,Gift reward offer,Outline
|
|
53
|
+
52,Commerce,percent,discount sale offer promo,Lucide,import { Percent } from 'lucide-react',<Percent />,Discount percentage sale,Outline
|
|
54
|
+
53,Data,bar-chart,analytics statistics graph metrics,Lucide,import { BarChart } from 'lucide-react',<BarChart />,Bar chart analytics,Outline
|
|
55
|
+
54,Data,pie-chart,statistics distribution breakdown,Lucide,import { PieChart } from 'lucide-react',<PieChart />,Pie chart distribution,Outline
|
|
56
|
+
55,Data,trending-up,growth increase positive trend,Lucide,import { TrendingUp } from 'lucide-react',<TrendingUp />,Growth trend positive,Outline
|
|
57
|
+
56,Data,trending-down,decline decrease negative trend,Lucide,import { TrendingDown } from 'lucide-react',<TrendingDown />,Decline trend negative,Outline
|
|
58
|
+
57,Data,activity,pulse heartbeat monitor live,Lucide,import { Activity } from 'lucide-react',<Activity />,Activity monitor pulse,Outline
|
|
59
|
+
58,Data,database,storage server data backend,Lucide,import { Database } from 'lucide-react',<Database />,Database storage,Outline
|
|
60
|
+
59,Files,file,document page paper doc,Lucide,import { File } from 'lucide-react',<File />,File document,Outline
|
|
61
|
+
60,Files,file-text,document text page article,Lucide,import { FileText } from 'lucide-react',<FileText />,Text document article,Outline
|
|
62
|
+
61,Files,folder,directory organize group files,Lucide,import { Folder } from 'lucide-react',<Folder />,Folder directory,Outline
|
|
63
|
+
62,Files,folder-open,expanded browse files view,Lucide,import { FolderOpen } from 'lucide-react',<FolderOpen />,Open folder browse,Outline
|
|
64
|
+
63,Files,paperclip,attachment attach file link,Lucide,import { Paperclip } from 'lucide-react',<Paperclip />,Attachment paperclip,Outline
|
|
65
|
+
64,Files,link,url hyperlink chain connect,Lucide,import { Link } from 'lucide-react',<Link />,Link URL hyperlink,Outline
|
|
66
|
+
65,Files,clipboard,paste copy buffer notes,Lucide,import { Clipboard } from 'lucide-react',<Clipboard />,Clipboard paste,Outline
|
|
67
|
+
66,Layout,grid,tiles gallery layout dashboard,Lucide,import { Grid } from 'lucide-react',<Grid />,Grid layout gallery,Outline
|
|
68
|
+
67,Layout,list,rows table lines items,Lucide,import { List } from 'lucide-react',<List />,List view rows,Outline
|
|
69
|
+
68,Layout,columns,layout split dual sidebar,Lucide,import { Columns } from 'lucide-react',<Columns />,Column layout split,Outline
|
|
70
|
+
69,Layout,maximize,fullscreen expand enlarge zoom,Lucide,import { Maximize } from 'lucide-react',<Maximize />,Fullscreen maximize,Outline
|
|
71
|
+
70,Layout,minimize,reduce shrink collapse exit,Lucide,import { Minimize } from 'lucide-react',<Minimize />,Minimize reduce,Outline
|
|
72
|
+
71,Layout,sidebar,panel drawer navigation menu,Lucide,import { Sidebar } from 'lucide-react',<Sidebar />,Sidebar panel,Outline
|
|
73
|
+
72,Social,heart,like love favorite wishlist,Lucide,import { Heart } from 'lucide-react',<Heart />,Like favorite love,Outline
|
|
74
|
+
73,Social,star,rating review favorite bookmark,Lucide,import { Star } from 'lucide-react',<Star />,Star rating favorite,Outline
|
|
75
|
+
74,Social,thumbs-up,like approve agree positive,Lucide,import { ThumbsUp } from 'lucide-react',<ThumbsUp />,Like approve thumb,Outline
|
|
76
|
+
75,Social,thumbs-down,dislike disapprove disagree negative,Lucide,import { ThumbsDown } from 'lucide-react',<ThumbsDown />,Dislike disapprove,Outline
|
|
77
|
+
76,Social,bookmark,save later favorite mark,Lucide,import { Bookmark } from 'lucide-react',<Bookmark />,Bookmark save,Outline
|
|
78
|
+
77,Social,flag,report mark important highlight,Lucide,import { Flag } from 'lucide-react',<Flag />,Flag report,Outline
|
|
79
|
+
78,Device,smartphone,mobile phone device touch,Lucide,import { Smartphone } from 'lucide-react',<Smartphone />,Mobile smartphone,Outline
|
|
80
|
+
79,Device,tablet,ipad device touch screen,Lucide,import { Tablet } from 'lucide-react',<Tablet />,Tablet device,Outline
|
|
81
|
+
80,Device,monitor,desktop screen computer display,Lucide,import { Monitor } from 'lucide-react',<Monitor />,Desktop monitor,Outline
|
|
82
|
+
81,Device,laptop,notebook computer portable device,Lucide,import { Laptop } from 'lucide-react',<Laptop />,Laptop computer,Outline
|
|
83
|
+
82,Device,printer,print document output paper,Lucide,import { Printer } from 'lucide-react',<Printer />,Printer print,Outline
|
|
84
|
+
83,Security,lock,secure password protected private,Lucide,import { Lock } from 'lucide-react',<Lock />,Lock secure,Outline
|
|
85
|
+
84,Security,unlock,open access unsecure public,Lucide,import { Unlock } from 'lucide-react',<Unlock />,Unlock open,Outline
|
|
86
|
+
85,Security,shield,protection security safe guard,Lucide,import { Shield } from 'lucide-react',<Shield />,Shield protection,Outline
|
|
87
|
+
86,Security,key,password access unlock login,Lucide,import { Key } from 'lucide-react',<Key />,Key password,Outline
|
|
88
|
+
87,Security,eye,view show visible password,Lucide,import { Eye } from 'lucide-react',<Eye />,Show password view,Outline
|
|
89
|
+
88,Security,eye-off,hide invisible password hidden,Lucide,import { EyeOff } from 'lucide-react',<EyeOff />,Hide password,Outline
|
|
90
|
+
89,Location,map-pin,location marker place address,Lucide,import { MapPin } from 'lucide-react',<MapPin />,Location pin marker,Outline
|
|
91
|
+
90,Location,map,directions navigate geography location,Lucide,import { Map } from 'lucide-react',<Map />,Map directions,Outline
|
|
92
|
+
91,Location,navigation,compass direction pointer arrow,Lucide,import { Navigation } from 'lucide-react',<Navigation />,Navigation compass,Outline
|
|
93
|
+
92,Location,globe,world international global web,Lucide,import { Globe } from 'lucide-react',<Globe />,Globe world,Outline
|
|
94
|
+
93,Time,calendar,date schedule event appointment,Lucide,import { Calendar } from 'lucide-react',<Calendar />,Calendar date,Outline
|
|
95
|
+
94,Time,refresh-cw,reload sync update refresh,Lucide,import { RefreshCw } from 'lucide-react',<RefreshCw />,Refresh reload,Outline
|
|
96
|
+
95,Time,rotate-ccw,undo back revert history,Lucide,import { RotateCcw } from 'lucide-react',<RotateCcw />,Undo revert,Outline
|
|
97
|
+
96,Time,rotate-cw,redo forward repeat history,Lucide,import { RotateCw } from 'lucide-react',<RotateCw />,Redo forward,Outline
|
|
98
|
+
97,Development,code,develop programming syntax html,Lucide,import { Code } from 'lucide-react',<Code />,Code development,Outline
|
|
99
|
+
98,Development,terminal,console cli command shell,Lucide,import { Terminal } from 'lucide-react',<Terminal />,Terminal console,Outline
|
|
100
|
+
99,Development,git-branch,version control branch merge,Lucide,import { GitBranch } from 'lucide-react',<GitBranch />,Git branch,Outline
|
|
101
|
+
100,Development,github,repository code open source,Lucide,import { Github } from 'lucide-react',<Github />,GitHub repository,Outline
|