I love how when building abstractions like this with radix, if you replace "Modal" there with "Popover" it should just work™ given you expose the same API. Absolutelly love it!
Damn! I was hardcoding all this just because of the button trigger, thanks for this helpful tutorial. Also, could you please create a video on shared element transition between two pages? One way i know is using layoutId from framer motion but i couldn't customize it Assume page 1 has 1 image on left side and 2 page has the same image but on the right side When navigated to page 2 from page one the image should slide to left Please create this video, there's no video on UA-cam about it, especially with NextJs 13. Again thanks this was a super cool video 👏 ❤
Great, it looks like you almost have a content playlist - "Practical Next.js, Radix UI, Tailwind, Animation", or it's a future course on Buid UI =)). Thanks for sharing all that knowledge.
Fantastic content! Would it be possible for you to create a tutorial covering the intricacies of designing components and the architecture of React applications?
The way to make exports like Modal.Button = Dialog.Trigger is really beautiful for eyes, no more a bucnh of imports from radix library mixed with own components. Btw I also saw this trick in shadcn ui library.
Hi Sam, I stumbled upon your content looking for RSC and found a whole bunch of awesome videos and content you have created so far. Your way of teaching is just absolutely amazing. Appreciate all your time and effort for bringing such a quality content. One question I had what vscode theme and font you are using.. Its really soothing to eyes and very readable distraction free.. Thank you
Yes you would to be fully compatible, but I usually wait until I see an error to add it as you often don't need it depending on what functionality you expose.
I'm having a problem scrolling my modal with mobile devices when the virtual keyboard appears. The problem is that the keyboard appears above the form and the scroll remains blocked. the scroll is only working if the size of my form in the center is initially larger than the screen size. 
The component itself would need to be a client component, you could add it at the top of modal.tsx. That way the page/layout itself could still be a RSC.
I love how when building abstractions like this with radix, if you replace "Modal" there with "Popover" it should just work™ given you expose the same API. Absolutelly love it!
How you only have 23.5k subs is beyond me. This is fantastic. Thanks!
Every time I watch one of your videos, I feel like I'm learning something new. Outstanding explanation and great presentation.
Amazing mate! More Radix / Framer Motion tutorials please! We need them!
Damn! I was hardcoding all this just because of the button trigger, thanks for this helpful tutorial.
Also, could you please create a video on shared element transition between two pages?
One way i know is using layoutId from framer motion but i couldn't customize it
Assume page 1 has 1 image on left side and 2 page has the same image but on the right side
When navigated to page 2 from page one the image should slide to left
Please create this video, there's no video on UA-cam about it, especially with NextJs 13.
Again thanks this was a super cool video 👏 ❤
1st video I have seen of yours. Such a great flow. Lighting. Camera angles. Effortless editing between showing the code/output/yourself.
Radix is just awesome! Been using it with shadcn/ui and its extensibility and customization is just awesome!
Damn i love this kind of series. Keep it comming. In last project i was kinda hating my modal because i made from scratch.
Great, it looks like you almost have a content playlist - "Practical Next.js, Radix UI, Tailwind, Animation", or it's a future course on Buid UI =)). Thanks for sharing all that knowledge.
That’s the level of quality of neckline trim that I aspire to but rarely achieve. Are you using a DE or a straight razor?
😄 ty! Yep I use a safety razor, always found them to be the best
The thought process and simplicity of explanation is superb! Thanks for this wonderful effort to share
definitely need more radix contents sam!
Fantastic content!
Would it be possible for you to create a tutorial covering the intricacies of designing components and the architecture of React applications?
The way to make exports like Modal.Button = Dialog.Trigger is really beautiful for eyes, no more a bucnh of imports from radix library mixed with own components.
Btw I also saw this trick in shadcn ui library.
Incredible!
as always very helpful thx.
Hi Sam, I stumbled upon your content looking for RSC and found a whole bunch of awesome videos and content you have created so far. Your way of teaching is just absolutely amazing. Appreciate all your time and effort for bringing such a quality content. One question I had what vscode theme and font you are using.. Its really soothing to eyes and very readable distraction free.. Thank you
Thanks for the kind words! I use Dracula draculatheme.com
I wish we had content creators like Sam for Blazor ;)
Why would you ever choose to use Blazor?
I see a new Sam video
I click
Great video as always! One question: do we need to forward the ref to the root of our new component in thia case?
Yes you would to be fully compatible, but I usually wait until I see an error to add it as you often don't need it depending on what functionality you expose.
Not sure why the modal does not close for me tried everything
I'm having a problem scrolling my modal with mobile devices when the virtual keyboard appears. The problem is that the keyboard appears above the form and the scroll remains blocked. the scroll is only working if the size of my form in the center is initially larger than the screen size.

But... Aren't we back to client side if the whole page is marked as "use client"? The component doesn't seem to work in RSC.
The component itself would need to be a client component, you could add it at the top of modal.tsx. That way the page/layout itself could still be a RSC.
where can I learn more about this Component.Subcomponent = ... pattern?
It's really just property assignment, Component is a function but functions in JavaScript are also objects. So you can attach properties to them!
what hapenned at 7:08?
No edits - I just turned off word wrapping (⌥ + Z) so the code took up fewer vertical lines!