CODEWITHSUNDEEP
reactjstailwind-cssastrojs
hey
hey

Reputation: 91

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

Upvotes: 0

Views: 2296

Answers (1)

Alex
Alex

Reputation: 353

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.

Upvotes: 3

Related Questions