← Back to Metrics & Analytics

Monitor and analyze how design system components are being used across teams and projects. Track adoption patterns, identify popular components, and spot optimization opportunities.

TOTAL INSTANCES

3,737
+18% vs last period

ACTIVE COMPONENTS

47
5 new this month

USING TEAMS

15
100% of dev teams

COVERAGE

84%
UI elements covered
Showing 30d • All Teams

Button

+15%
1247 instances12 teams23 projects

Popular Versions

2.1.0
2.0.5
1.9.2

Most Used Props

variantsizedisabled

Usage Trend

+15% in 30d

Input

+8%
892 instances10 teams18 projects

Popular Versions

1.8.1
1.8.0
1.7.5

Most Used Props

typeplaceholderrequired

Usage Trend

+8% in 30d

Card

+22%
654 instances8 teams15 projects

Popular Versions

3.0.0
2.9.1

Most Used Props

paddingshadowborder

Usage Trend

+22% in 30d

Modal

-5%
423 instances7 teams12 projects

Popular Versions

1.5.2
1.5.1

Most Used Props

sizeclosableoverlay

Usage Trend

-5% in 30d

Table

+31%
287 instances6 teams9 projects

Popular Versions

2.3.0
2.2.1

Most Used Props

sortablepaginationstriped

Usage Trend

+31% in 30d

Dropdown

+12%
234 instances5 teams8 projects

Popular Versions

1.4.0
1.3.8

Most Used Props

multiplesearchableclearable

Usage Trend

+12% in 30d

Tracking Methods

Automated Analytics

Bundle analysis and build-time tracking

// Webpack plugin example const DesignSystemAnalyzer = { apply(compiler) { compiler.hooks.done.tap('DSAnalyzer', (stats) => { const modules = stats.compilation.modules const dsComponents = modules.filter(m => m.resource?.includes('@company/design-system') ) // Send usage data to analytics analytics.track('component_usage', { components: dsComponents.map(c => c.name), timestamp: Date.now() }) }) } }

Runtime Telemetry

Component usage tracking in production

// Component wrapper for tracking const withUsageTracking = (Component, name) => { return (props) => { useEffect(() => { analytics.track('component_render', { component: name, props: Object.keys(props), timestamp: Date.now() }) }, []) return <Component {...props} /> } }

Data Collection

NPM Downloads

Track package installations and version adoption

Bundle Analysis

Analyze which components are actually used in builds

Git Analytics

Track component imports and usage patterns in code

Runtime Metrics

Real-time component rendering and interaction data

📈 Trends Identified

  • Button component surge: 15% increase driven by new CTA patterns adoption
  • Card component growth: 22% increase following layout system update
  • Modal usage declining: -5% as teams shift to inline editing patterns

🎯 Recommended Actions

  • Optimize Button variants: Create specialized CTA button based on usage patterns
  • Improve Modal component: Research alternatives and update documentation
  • Promote underused components: Create examples for Table and Dropdown