Calendar animation

[TheRay432]

The calendar is using React DayPicker v9.7.0, so the animate prop should be available. However, it’s not working at the moment. Importing react-day-picker/style.css is required, but it changes the existing styles. I’d like to ask if there’s a solution for implementing month transition animations. Thank you for your help!

[kokoc30]

For v9.7.0, you can keep shadcn’s styling and add only the animation CSS. The animate prop makes DayPicker add enter/exit classes; it does not define their keyframes. Importing the complete style.css also imports DayPicker’s default sizes, borders, colors, etc., which explains the visual changes you saw.

For example, this adds a simple month cross-fade without importing that stylesheet:

<div className="calendar-motion">
  <Calendar animate />
</div>

Put the following in your global CSS:

.calendar-motion {
  --calendar-motion-duration: 180ms;
}

@keyframes calendar-month-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes calendar-month-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.calendar-motion .rdp-weeks_before_enter,
.calendar-motion .rdp-weeks_after_enter,
.calendar-motion .rdp-caption_before_enter,
.calendar-motion .rdp-caption_after_enter {
  animation: calendar-month-in var(--calendar-motion-duration) ease-out both;
}

.calendar-motion .rdp-weeks_before_exit,
.calendar-motion .rdp-weeks_after_exit,
.calendar-motion .rdp-caption_before_exit,
.calendar-motion .rdp-caption_after_exit {
  animation: calendar-month-out var(--calendar-motion-duration) ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .calendar-motion { --calendar-motion-duration: 1ms; }
}

These are the animation states in v9.7.0. DayPicker merges its default class names with your classNames overrides, so your normal shadcn layout classes can remain. If you explicitly override any of the eight animation class names, use those names in the CSS instead. Ensure your local Calendar forwards animate to DayPicker.

Include the caption exit rules as well as the week rules: in v9.7.0’s animation implementation, the outgoing caption’s animationend event triggers cleanup. The reduced-motion rule above keeps a very short animation rather than disabling that event.

If you prefer DayPicker’s original directional slide, copy just the animation keyframes/rules from the end of the version-matched stylesheet, including the RTL rules and animation variables. The rest of its default theme is not needed for that effect.

[Drako01]

The animate prop in React DayPicker v9 enables animation states, but the actual visual transitions depend on CSS rules.

That's why importing react-day-picker/style.css makes the animations work while also changing your existing shadcn/ui styles.

I would avoid importing the entire stylesheet solely to enable animations.

A cleaner approach is:

1. Pass animate to the underlying DayPicker through your Calendar component.
2. Keep the existing shadcn classNames and styles.
3. Copy only the animation-related rules from the installed version of react-day-picker/style.css into your application's stylesheet.
4. Scope those rules to your Calendar wrapper to avoid affecting unrelated components.

For example:

<Calendar
  animate
  className="custom-calendar"
/>

You can customize animation timing through:

.custom-calendar {
  --rdp-animation_duration: 0.2s;
  --rdp-animation_timing: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-calendar {
    --rdp-animation_duration: 0s;
  }
}

Note that the CSS variables control timing; they do not replace the missing animation keyframes.

DayPicker uses animation state classes such as .rdp-caption_after_enter, .rdp-caption_before_exit, and their corresponding weeks variants. Those are the selectors to inspect when extracting the animation rules.

I'd also verify the exact installed DayPicker version and confirm that the shadcn Calendar wrapper forwards animate to DayPicker.

Official documentation: https://daypicker.dev/docs/navigation

This should let you preserve the shadcn styling while adding month transitions without importing the entire DayPicker stylesheet.

[Drako01]

Thanks for marking my answer as the accepted solution! I'm glad the explanation was helpful.

If you run into any additional issues with React DayPicker animations or shadcn/ui styling, feel free to share the details. Happy to help!