User Behavior Analytics

ui-ux-pro-maxMITPrompt onlyDashboard · dashboardLight and dark · bothMedium · mediumBlue · blueVivid · vividSerif · serifGeneral · generalProfessional · professional

User Behavior Analytics. Best for Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"User Behavior Analytics" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#user-behavior-analytics @ 28b3b8dee8c9.

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill · src/ui-ux-pro-max/data/styles.csv#user-behavior-analytics · 28b3b8dee8c9 · © Next Level Builder

Do

Funnel stages clear
☐ Flow diagram readable
☐ Conversions calculated
☐ Cohorts comparable
☐ Retention trends visible
☐ Privacy compliant

Don't

Real-time operational metrics
technical system monitoring
financial transactions

Prompt

Design a user behavior analytics dashboard. Use: funnel visualization, user flow diagrams (Sankey), conversion metrics, engagement heatmaps, cohort tables, retention curves, session replay indicators.

---
"User Behavior Analytics" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#user-behavior-analytics @ 28b3b8dee8c9.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "User Behavior Analytics. \"User Behavior Analytics\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#user-behavior-analytics @ 28b3b8dee8c9.",
  "$extensions": {
    "dev.styledex": {
      "id": "uupm-user-behavior-analytics",
      "license": "MIT",
      "attribution": "\"User Behavior Analytics\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#user-behavior-analytics @ 28b3b8dee8c9.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f7f5f2"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "card": {
      "$type": "color",
      "$value": "#f7f5f2"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "primary": {
      "$type": "color",
      "$value": "#1d4ed8"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#e3e1df"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "accent": {
      "$type": "color",
      "$value": "#1d4ed8"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e8e6e3"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6b6a68"
    },
    "border": {
      "$type": "color",
      "$value": "#d4d3d0"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1d4ed8"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "User Behavior Analytics" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#user-behavior-analytics @ 28b3b8dee8c9. */
:root {
  --background: #f7f5f2;
  --foreground: #1c1917;
  --card: #f7f5f2;
  --card-foreground: #1c1917;
  --primary: #1d4ed8;
  --primary-foreground: #fafaf9;
  --secondary: #e3e1df;
  --secondary-foreground: #1c1917;
  --accent: #1d4ed8;
  --accent-foreground: #fafaf9;
  --muted: #e8e6e3;
  --muted-foreground: #6b6a68;
  --border: #d4d3d0;
  --destructive: #dc2626;
  --ring: #1d4ed8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "User Behavior Analytics" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#user-behavior-analytics @ 28b3b8dee8c9. */
/** Tailwind theme extend for User Behavior Analytics (uupm-user-behavior-analytics) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f7f5f2",
        "foreground": "#1c1917",
        "card": "#f7f5f2",
        "primary": "#1d4ed8",
        "primary-foreground": "#fafaf9",
        "secondary": "#e3e1df",
        "accent": "#1d4ed8",
        "muted": "#e8e6e3",
        "border": "#d4d3d0",
        "destructive": "#dc2626",
        "ring": "#1d4ed8"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "User Behavior Analytics" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#user-behavior-analytics @ 28b3b8dee8c9. */
@layer base {
:root {
  --background: #f7f5f2;
  --foreground: #1c1917;
  --card: #f7f5f2;
  --card-foreground: #1c1917;
  --primary: #1d4ed8;
  --primary-foreground: #fafaf9;
  --secondary: #e3e1df;
  --secondary-foreground: #1c1917;
  --accent: #1d4ed8;
  --accent-foreground: #fafaf9;
  --muted: #e8e6e3;
  --muted-foreground: #6b6a68;
  --border: #d4d3d0;
  --destructive: #dc2626;
  --ring: #1d4ed8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}