Why is my ShadCN Calendar UI not rendering as expected?

Hey everyone 👋,

I’m using ShadCN UI in my React.js project and trying to implement the Calendar component. However, the calendar doesn’t look like the demo on the ShadCN website — the styles seem off, and it looks unstyled or broken.

Here’s what I have so far:

I followed the docs and installed date-fns, @radix-ui/react-popover, and copied the component code using npx shadcn-ui add calendar.

But here’s what I’m seeing:

The calendar layout is squished.

Some buttons are missing hover styles.

It doesn’t look like the nice styled version on the docs.

I already checked that Tailwind is working elsewhere in the project, so I’m not sure if I missed a step when setting up ShadCN or the Calendar component specifically.

Has anyone else run into this issue?
Do I need to add any additional Tailwind configuration, CSS imports, or Radix UI providers for this to look right?

Any help would be super appreciated! 🙏