Skip to content

Conversation

@Rani367
Copy link

@Rani367 Rani367 commented Nov 28, 2025

Description

Fixes the bug where adding the animate prop to the Calendar component causes weeks to display over each other and breaks navigation.

Closes #8905

Problem

The shadcn/ui Calendar component wraps react-day-picker but doesn't include the CSS animations required for the animate feature. When users added the animate prop, react-day-picker applied animation classes but without the CSS definitions, causing weeks to overlap instead of animating smoothly.

Solution

  • Added react-day-picker animation keyframes and classes to globals.css
  • Includes 6 animation keyframes for slide and fade effects
  • Added animation classes for weeks and captions
  • Includes RTL (right-to-left) support with direction-aware animations
  • Respects user's prefers-reduced-motion accessibility preference
  • Uses CSS variables with fallbacks: --rdp-animation_duration and --rdp-animation_timing

Changes

  • globals.css: Added animation CSS for react-day-picker
  • calendar-demo.tsx: Added animate prop to showcase the feature
  • calendar.mdx: Added documentation section explaining animate prop usage

Testing

  • TypeScript typecheck passed
  • ESLint checks passed
  • Registry built successfully
  • Calendar navigation works smoothly with animate prop
  • Animations respect user's motion preferences

Checklist

  • I have read the contributing guide
  • My commits follow the commit convention (fix(calendar): ...)
  • I have tested my changes locally
  • I have updated the documentation

- Add react-day-picker animation keyframes and classes to globals.css
- Include support for RTL and reduced-motion preferences
- Update calendar demo to showcase animate prop
- Add documentation for animate prop usage

Fixes weeks overlapping when using the animate prop on Calendar component
@vercel
Copy link

vercel bot commented Nov 28, 2025

@Rani367 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

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.

[bug]: Calendar component animation not working

1 participant