Skip to content

Conversation

@bob-obringer
Copy link
Collaborator

Summary

  • Adds smooth prop to Progress component enabling 500ms CSS transition on value changes
  • Uses Tailwind v4's canonical **:data-[slot=progress-indicator]:duration-500 selector
  • Includes new SmoothAnimation story demonstrating the feature

Usage

<Progress value={progress} smooth>
  <ProgressLabel>Uploading...</ProgressLabel>
  <ProgressValue />
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</Progress>

Test plan

  • View SmoothAnimation story in Storybook - compare smooth vs instant transitions
  • Verify the smooth control works in Interactive story
  • Build passes (yarn build)
  • Type check passes (yarn type-check)

🤖 Generated with Claude Code

@vercel
Copy link

vercel bot commented Jan 21, 2026

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

Project Deployment Review Updated (UTC)
ui Ready Ready Preview, Comment Jan 21, 2026 2:49am

Request Review

Adds a `smooth` prop that enables CSS transitions on the progress indicator.
- `smooth` or `smooth={true}` uses default 500ms duration
- `smooth={200}` uses custom 200ms duration

Uses CSS variable `--progress-duration` for flexibility.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants