Reusable Modals with Radix UI

Learn how to refactor a customized Radix Dialog into a reusable Modal component.

This is Part 3 of a series in collaboration with WorkOS.
Part 3: Reusable Modals with Radix UI

🔗 LINKS

🕐 TIMESTAMPS
0:00 - Intro
2:13 - Implementing Modal
3:49 - Implementing Modal.Button
5:03 - How to think about slots
6:23 - Implementing Modal.Content
8:41 - Implementing Modal.Close
10:38 - Reusing our new Modal
13:24 - Outro

[jackfairfield]

How you only have 23.5k subs is beyond me. This is fantastic. Thanks!

[am]

fascinating job and very elegant solutions

[Luxster]

Every time I watch one of your videos, I feel like I'm learning something new. Outstanding explanation and great presentation.

[robertgregg]

1st video I have seen of yours. Such a great flow. Lighting. Camera angles. Effortless editing between showing the code/output/yourself.

[DEV_XO]

Amazing mate! More Radix / Framer Motion tutorials please! We need them! <3

[khairulhaaziq]

definitely need more radix contents sam!

[igrb]

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!

[meowmesh]

Damn i love this kind of series. Keep it comming. In last project i was kinda hating my modal because i made from scratch.

[converter]

The thought process and simplicity of explanation is superb! Thanks for this wonderful effort to share <3

[SeanCassiere]

Radix is just awesome! Been using it with shadcn/ui and its extensibility and customization is just awesome!

[alexanderkuznetsov]

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.

[rashzh]

Fantastic content!
Would it be possible for you to create a tutorial covering the intricacies of designing components and the architecture of React applications?

[rjtdas]

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 YouTube about it, especially with NextJs 13.

Again thanks this was a super cool video 👏 ❤

[tshddx]

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?

[osman]

I wish we had content creators like Sam for Blazor ;)

[VAMDigital]

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

[nick-ui]

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.

[alisic]

Great video as always! One question: do we need to forward the ref to the root of our new component in thia case?

[Leralow]

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.



[edgarasben]

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.