Add Sparkline component for data visualization

[jalexw]

Summary

Introduces a new Sparkline component for rendering compact, inline data visualizations. This component supports multiple visual styles (line, area, bar), customizable colors with auto-detection, and flexible sizing options.

Key Changes

• New Sparkline component (src/components/ui/sparkline/sparkline.tsx):

  • Three visualization variants: line, area, and bar
  • Seven color options including auto mode that infers trend direction (positive/destructive/muted based on first vs. last data point)
  • Three preset sizes (sm/md/lg) with customizable width/height overrides
  • Features: gradient fills, baseline indicators, last-point dots, and configurable stroke widths
  • Proper SVG rendering with accessibility attributes (role, aria-label)
  • Responsive path building with normalized data scaling

• Comprehensive Storybook stories (src/components/ui/sparkline/Sparkline.stories.tsx):

  • Individual stories for each variant and color option
  • Integration examples showing sparklines in stat cards
  • Dashboard composition demonstrating real-world usage
  • Interactive controls for all configurable props

• Module exports (src/components/ui/sparkline/index.ts):

  • Exports component, variants, and type definitions
  • Updated main UI index to include sparkline exports

• Version bump: 0.37.1 → 0.38.0

Implementation Details

• Uses CVA (class-variance-authority) for variant styling with Tailwind classes
• Implements smart data normalization with configurable min/max bounds
• SVG-based rendering with proper aspect ratio handling and inset calculations to keep strokes visible
• Gradient support for area variant using SVG <linearGradient> with opacity transitions
• Bar variant includes dynamic gap calculation based on data density
• Auto-color resolution compares first and last values to determine trend

https://claude.ai/code/session_019gs1KVUbEtfcNWYNjs9tQ2

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ui	Ready	Preview, Comment	May 8, 2026 11:57am