reactjsshadcnui

How to render shadcn drawer component in a container and not the entire viewport?

In my app I want to render the shadcn drawer component in a specific container and not the entire viewport, how can I achieve this? I've tried editing the CSS class applied and even looked at the vaul implementation but nothing seems to work.

Solution

  • Straight from emilkowalski, the creator of Vaul, on which shadcn's Drawer is based:

    You can use the container prop for it! It's not well documented, but just passing a ref into Drawer.Root should be enough! :)

    NB: Check this comment by Emil as well or it won't work. You will need to edit the Drawer component that shadcn added!