Search code examples
reactjstailwind-cssastrojs

Astro React Tailwind and Shadcn-ui component not working correctly

I tried starting up a quick project with Astro React, Tailwind and of course shadcn-ui. When I copy the NavigationMenuDemo from https://ui.shadcn.com/docs/components/navigation-menu and import it into my layout (or index.astro) it only highlights the buttons on hover, no dropdown appears. I followed the guides on shadcn's website to start a new astro project.

Code: https://github.com/polooner/diverse-stem

Solution

  • You'll need to use client directives so the shadcn (React) components hydrate in some way e.g.

    <NavigationMenuDemo client:load />

    You'll need to do this for any framework component that needs to hydrate to be interactive.