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
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
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?
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?
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 👍
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!
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 ?
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 👍
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😁
Really looking forward to part 3 😁
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!
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
Excellent work! Tutorial pace is right on the money and design is simple but elegant.
Such a great overview about Radix and their dialog component! Instant sub!
Another great video! You are killing it! Thanks!
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! 🙌
You really are the best. Thank you for another excellent video.
Hey Sam! Need that surround with snippet/shortcut 😬 0:55
You are VS Code shortcut wizard. Can you do a video on VS Code shortcuts and snippets?
ua-cam.com/video/qIHR2wmxy3U/v-deo.html
excellent really, i see how well you prepared entire presentation
10 lines of code, but you have to know what 10 lines. It always pays to know what you are doing. Thanks for this!
Man that's sooooo clean.
Fantastic video, keep it up!!
Thank you! You are making some really good content!
Tempting to replay this several times
This is fire btw. Thanks for this video!
Always providing high quality and informative videos. Keep up the great work
This is awesome. I can even create my own Design System
This is so practical and useful, thank you for the tutorial 🙏
Such a professional video. Subscribed immediately.
these types of videos are very helpful! thx
high quality vid as always,thx.
Cool. Thanks.
Thanks for this video. Make a fun video about shadcn/ui, it uses Radix too.
Great content!
Always a joy
Thanks for the video 🤟
Great video as always. calm and clean
So nice and easy. Awesome video.
A real thank you, i've learned a lot in only 10 minutes
I would pay money to have videos on using each of the radix components
Amazing, love your videos, one of my favorite channel! 😃
Огромное спасибо. Круто
Great content as always!
Really cool! Would be great to see on how to refactor this into a more reusable component
i loved it
Good content....
огромное спасибо Вам!
Really missing out these cool things in Vue land.
I've never used react portals so i'm wondering, for dialogs, is there any benefits of using it over a element ?
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
what is the shortcut to wrap the html tag
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?
Hi Sam, great content.
Do you have any courses for RadixUI + TailwindCSS?
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?
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!
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!
Question: Shouldn't the Dialog.Root be written outside the users.map() function, for performance reasons? Source: My intuition haha
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 ?
why need to use max-w-md and w-full together? what effect does it offer?
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?
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 ?
What is the difference between tailwind-css and just writing inline-css?
What vscode theme do you use?
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 👍
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?
Is there a reason you prefer RadixUI over HeadlessUI?
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!