This is my first time here, and just exploring radix. These tutorials are rare find. So right into the point, super clear and easy to follow in a very right pace. Thank you Sam.
wow, I've messed just a tiny bit with radix-ui but you're helping really drive the value/purpose of it I admire your UI skills, it's my kryptonite atm, but you make it looks so easy! The step by step approach makes it look more manageable. Thanks for the share!
hmm, I think it's the combination with tailwind.css which is a real winning combination, bc then you can very, very easily modify the CSS and see immediate changes, versus I'm used to manually typing the CSS in the style, inline as a json obj. Albeit your experience with the specific radix components makes it look easy. I'm looking forward to trying this new approach sometime though to test my theory
Hey Sam, awesome tutorial as always! One question tho: would you recommend using this Dialog approach in creating Hamburger menu navigation for mobile phones. I want the same dialog functionality, but i am concerned about a11y aspect (role="dialog" for example etc.) What would be your approach, or what primitive would you use in that case?
Thats so cool thank you for sharing valuable informations can I ask favour please can we have more videos with next js 13.4 make a app with server side actions etc
Cool! Two questions: How would you abstract this in the best way? The close button and the title will probably always be rendered. And how would you animate these? Render them static and let framer motion do the job with controlled state?
Both questions will be answered in the series! tl;dr you can use Framer Motion but I'll be showing off CSS animations (Ep. 2). In Ep. 3 we'll cover reusability 👍
Given the cool new features like intercept and parallel routes of Next 13, wouldn't you use those to create the interactions for a dialog instead of Radix?
In a non-Next.js app yes, in a Next.js app I would turn the button into a client component that also handles the modal (because the modal is a client-side interactive feature). I think I will make a video on this refactoring once I wrap this series!
Not bad at all, because the Dialog.Content is rendered in a React Portal, and has no output whenever the dialog is closed. So there's only ever one dialog rendered when a card is selected. Being able to render each Trigger component locally directly inside the loop is actually one of the benefits of Radix's API 👍
Yes! The actual dialog contents (in the portal) is only rendered once for the selected card. Being able to render each Trigger component locally directly inside the loop is actually one of the benefits of the way Radix component are structured 👍
ปีที่แล้ว
its normal to every line has your dialog? or create a dialog that everyline calls to use ?
the can't scroll feature of the Radix Dialog is nice, but on operating systems like windows it makes the scrollbar in the browser disappear, and thus causing layout shift. Is there an easy fix for this problem?
I think in the past libraries like Bootstrap would handle that by applying some padding to body when a modal is open. Let's say scrollbar is 10px wide, when a modal is open you would add a class to body and then add 10px padding when that class is present and that would prevent the content from jumping because same area would be taken in place of scrollbar. Not sure if they still do it that way, but I do remember it as an ok trick to handle that. Also, I'm looking at Radix UI Dialog documentation on Windows now and I don't see layout shifting when opening the Dialog. Maybe they handle that already for you?
Radix has several more components. Headless is great but just not quite as full featured. I reach for Radix these days 👍 Headless still well supported and a great choice though!
I'll be honest, this is why Radix/Tailwind isn't for me. 3 wrappers and all of CSS in one line... I know we've switched the definition of "separation of concerns" from separating HTML-CSS-JS to just components (having their own HTML/CSS/JS all mixed up in this monstrosity), but this just gives me the foulest of code smells. I'll wait till we come up with something better. Great video though!
This is my first time here, and just exploring radix. These tutorials are rare find. So right into the point, super clear and easy to follow in a very right pace. Thank you Sam.
Thank you for this quick overview. I hope your partnership with workos lasts long enough to covere 80-90% of the primitives😁
Wow, Radix looks like an awesome library, really cool that it doesn't inject any styles as well! Thanks for sharing!
great Radix content! Thank you so much for producing such high quality content for free!
Another great video! You are killing it! Thanks!
Such a great overview about Radix and their dialog component! Instant sub!
wow, I've messed just a tiny bit with radix-ui but you're helping really drive the value/purpose of it
I admire your UI skills, it's my kryptonite atm, but you make it looks so easy! The step by step approach makes it look more manageable. Thanks for the share!
hmm, I think it's the combination with tailwind.css which is a real winning combination, bc then you can very, very easily modify the CSS and see immediate changes, versus I'm used to manually typing the CSS in the style, inline as a json obj. Albeit your experience with the specific radix components makes it look easy. I'm looking forward to trying this new approach sometime though to test my theory
What a fantastic video, Sam. I kept hoping you would touch on the dialog title part which is not always obvious as it has a11y utility. Thank you! 🙌
Excellent work! Tutorial pace is right on the money and design is simple but elegant.
Really looking forward to part 3 😁
You really are the best. Thank you for another excellent video.
Always providing high quality and informative videos. Keep up the great work
This is fire btw. Thanks for this video!
Thank you! You are making some really good content!
Cool. Thanks.
these types of videos are very helpful! thx
Man that's sooooo clean.
Fantastic video, keep it up!!
10 lines of code, but you have to know what 10 lines. It always pays to know what you are doing. Thanks for this!
high quality vid as always,thx.
Such a professional video. Subscribed immediately.
Always a joy
excellent really, i see how well you prepared entire presentation
Thanks for the video 🤟
This is so practical and useful, thank you for the tutorial 🙏
Great video as always. calm and clean
A real thank you, i've learned a lot in only 10 minutes
You are VS Code shortcut wizard. Can you do a video on VS Code shortcuts and snippets?
th-cam.com/video/qIHR2wmxy3U/w-d-xo.html
Great content!
Amazing, love your videos, one of my favorite channel! 😃
So nice and easy. Awesome video.
Great content as always!
Hey Sam! Need that surround with snippet/shortcut 😬 0:55
This is awesome. I can even create my own Design System
i loved it
Tempting to replay this several times
огромное спасибо Вам!
Good content....
Огромное спасибо. Круто
Really cool! Would be great to see on how to refactor this into a more reusable component
I've never used react portals so i'm wondering, for dialogs, is there any benefits of using it over a element ?
Thanks for this video. Make a fun video about shadcn/ui, it uses Radix too.
I would pay money to have videos on using each of the radix components
Hey Sam, awesome tutorial as always! One question tho: would you recommend using this Dialog approach in creating Hamburger menu navigation for mobile phones. I want the same dialog functionality, but i am concerned about a11y aspect (role="dialog" for example etc.) What would be your approach, or what primitive would you use in that case?
Really missing out these cool things in Vue land.
what is the shortcut to wrap the html tag
Thats so cool thank you for sharing valuable informations can I ask favour please can we have more videos with next js 13.4 make a app with server side actions etc
Cool! Two questions:
How would you abstract this in the best way? The close button and the title will probably always be rendered. And how would you animate these? Render them static and let framer motion do the job with controlled state?
Both questions will be answered in the series!
tl;dr you can use Framer Motion but I'll be showing off CSS animations (Ep. 2). In Ep. 3 we'll cover reusability 👍
@@samselikoff Just came here to ask the same two questions! Can't wait for part 2 and 3!
Question: Shouldn't the Dialog.Root be written outside the users.map() function, for performance reasons? Source: My intuition haha
niceee
Given the cool new features like intercept and parallel routes of Next 13, wouldn't you use those to create the interactions for a dialog instead of Radix?
Great job Sam ... tks a lot ... just one question, would this work without use client directive ?
In a non-Next.js app yes, in a Next.js app I would turn the button into a client component that also handles the modal (because the modal is a client-side interactive feature). I think I will make a video on this refactoring once I wrap this series!
Great video, really nice DX. I wonder the cost of having a dialog for each item instead a global one. Is it optimized by radix/react portal ?
Hi Sam, great content.
Do you have any courses for RadixUI + TailwindCSS?
Honestly feels like a lot of custom work styling and setting things up to just get a normal modal. Is the there no "out-of-the-box" solution?
why need to use max-w-md and w-full together? what effect does it offer?
Is it not a bad practise to have a Dialog instance for each user object instead of just one Dialog for any user object?
Not bad at all, because the Dialog.Content is rendered in a React Portal, and has no output whenever the dialog is closed. So there's only ever one dialog rendered when a card is selected.
Being able to render each Trigger component locally directly inside the loop is actually one of the benefits of Radix's API 👍
What is the difference between tailwind-css and just writing inline-css?
What vscode theme do you use?
Is it fine that the Dialog is rendered many times for every item in array?
Yes! The actual dialog contents (in the portal) is only rendered once for the selected card. Being able to render each Trigger component locally directly inside the loop is actually one of the benefits of the way Radix component are structured 👍
its normal to every line has your dialog? or create a dialog that everyline calls to use ?
Is there a reason you prefer RadixUI over HeadlessUI?
the can't scroll feature of the Radix Dialog is nice, but on operating systems like windows it makes the scrollbar in the browser disappear, and thus causing layout shift. Is there an easy fix for this problem?
Add overflow-y-scroll to force the scrollbar to always appear?
I think in the past libraries like Bootstrap would handle that by applying some padding to body when a modal is open. Let's say scrollbar is 10px wide, when a modal is open you would add a class to body and then add 10px padding when that class is present and that would prevent the content from jumping because same area would be taken in place of scrollbar.
Not sure if they still do it that way, but I do remember it as an ok trick to handle that. Also, I'm looking at Radix UI Dialog documentation on Windows now and I don't see layout shifting when opening the Dialog. Maybe they handle that already for you?
How's this better than headless-ui?
Radix has several more components. Headless is great but just not quite as full featured. I reach for Radix these days 👍 Headless still well supported and a great choice though!
Can the dialog be animated in and out?!
It sure can, we're covering that in the next episode!
I'll be honest, this is why Radix/Tailwind isn't for me. 3 wrappers and all of CSS in one line... I know we've switched the definition of "separation of concerns" from separating HTML-CSS-JS to just components (having their own HTML/CSS/JS all mixed up in this monstrosity), but this just gives me the foulest of code smells. I'll wait till we come up with something better. Great video though!