shadcn/ui DropdownMenu component not working with Astro
I followed exactly the instructions from this page to use shadcn/ui with Astro, even using their template from scratch, when I add the Dropdown Menu component and use it (again, following exactly the example), I always get the following error:
DropdownMenuTrigger must be used within DropdownMenu
Any idea what could be wrong given the fact that I tried on a totally empty project following the instructions?
It's useless for me to share you the code, it's exactly as the link above. 😅Astro
Install and configure Astro.
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
2 Replies
I shared a repository:
https://github.com/benjamin-guibert/shadcn/tree/main
You juste have to
pnpm install
and pnpm dev
GitHub
GitHub - benjamin-guibert/shadcn
Contribute to benjamin-guibert/shadcn development by creating an account on GitHub.
I managed to get rid of the error by using the
DropdownMenu
component in a .tsx
file instead of .astro
file but now the trigger don't even work. 😅 🔫
It was not working because the component was server-side. I added the client:load
property to my component in the .astro
file so it's loaded client-side.