0.58.0 - Add ScrollProgress component

[jalexw]

Summary

Introduces a new ScrollProgress component that displays a horizontal progress bar indicating scroll position. The component can track either document/window scroll or scroll within a specific container element, making it useful for long-form content like articles and documentation.

Changes

• New ScrollProgress component (src/components/ui/scroll-progress/)

  • Tracks vertical scroll progress and displays as a horizontal fill bar
  • Supports positioning at top, bottom, or static (inline) via position prop
  • Configurable size (sm, default, lg) and color variants (default gradient, brand, primary, positive, warning, destructive)
  • Optional containerRef prop to track scroll within a specific element instead of the document
  • Uses Framer Motion spring animation for smooth progress following
  • Respects prefers-reduced-motion by snapping directly to scroll value
  • Fully accessible with proper ARIA attributes (role="progressbar", aria-label, aria-valuemin/max)

• Comprehensive Storybook stories demonstrating all size and color variants with an interactive demo that tracks scroll within a contained panel

• Updated exports in src/components/ui/index.ts to include the new component

• Added useSpring export to src/framer-motion.ts for animation support

• Version bump to 0.58.0 in package.json

Implementation Details

• Component uses useScroll from Framer Motion to track scroll progress
• Spring animation configured with stiffness: 140, damping: 24, mass: 0.4 for responsive but smooth following
• Styled with CVA variants for consistent theming and customization
• Story wrapper (ScrollProgressDemo) provides a self-contained scrollable container for testing within Storybook's iframe constraints

https://claude.ai/code/session_013NvrVicJA2SnxDnvQT9Kca

[vercel]

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

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