The latest articles on Forem by Jitesh Pawar (@jitesh_pawar_4759e22035c9). https://forem.com/jitesh_pawar_4759e22035c9 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3494420%2F50cf162c-ba49-4cb9-8ffe-5593402da5f8.png https://forem.com/jitesh_pawar_4759e22035c9 en Jitesh Pawar Thu, 11 Sep 2025 08:52:56 +0000 https://forem.com/jitesh_pawar_4759e22035c9/why-is-my-shadcn-calendar-ui-not-rendering-as-expected-2h7f https://forem.com/jitesh_pawar_4759e22035c9/why-is-my-shadcn-calendar-ui-not-rendering-as-expected-2h7f <p>Hey everyone 👋,</p> <p>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.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fulccdpfmqi04fwa1jav2.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fulccdpfmqi04fwa1jav2.png" alt=" " width="800" height="326"></a></p> <p>Here’s what I have so far:</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftj84xk1jllw9xj3joclj.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftj84xk1jllw9xj3joclj.png" alt=" " width="800" height="475"></a><br> I followed the docs and installed date-fns, @radix-ui/react-popover, and copied the component code using npx shadcn-ui add calendar.</p> <p>But here’s what I’m seeing:</p> <p>The calendar layout is squished.</p> <p>Some buttons are missing hover styles.</p> <p>It doesn’t look like the nice styled version on the docs.</p> <p>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.</p> <p>Has anyone else run into this issue?<br> Do I need to add any additional Tailwind configuration, CSS imports, or Radix UI providers for this to look right?</p> <p>Any help would be super appreciated! 🙏</p> webdev programming javascript react