This is a goldmine. Sam, it was extremely helpful, why don't you create a series of videos on react-aria-components?

This is the component library I was looking for a long time. Finally something without crazy nesting of unnecessary child-child-child-elements and css rules, unopinionated and therefore integrates great with tailwindcss, which I could not imagine working without anymore. Yet it takes care of all the state-handling, accessibility etc. I will definitely give react-aria-components a try later! Also this was a great demo. I think beginners or people who are just curious can follow along but also for experienced/senior devs like me it was inspiring. Thank you!

It always impresses me how thoroughly you delve into all the smallest details to create a UI that looks seamless and perfect! Thanks for these meticulous tutorials that you share with us!

This is gold, thank you so much. Keep making such modern components videos.

Without a doubt, you are a very talented tutor. Thank you for these lessons!

Man, you care about these details so much! ❤

Wanted to get a look at React Aria Components and you introduced it in an easy and professional way. Great content!

So good! I've been playing with the new components the last few days as well. As a long-time React Aria user, it's so nice to have these - makes things so much easier compared to the low-level hooks. Also Sam I gotta comment on your production quality - it just keeps getting better and better 👌And Build UI lifetime membership was a no-brainer purchase! Thank you for making it more accessible with the new model.

Another amazing video! The way you code makes things looks simple and easy!

So satisfying to watch, learned a lot about Tailwind! Thanks for sharing ♥

Great video Sam. Fascinating to see all the details you are thinking about and what React Aria Components can do

Amazing! Thanks for your high-quality content

Mindblown here. Thanks Sam! 🎉

Here because of the podcast episode, I had to see it 😅 love it!

This is so satisfying, gonna be using a whole lot of aria components now

Amazing Sam!

Brilliant video!

Your videos are awesome!

Very good walk thru. Thanks

The subtle width animation while pressing is awesome, never thought about that

Another awesome video. Thanks! 🙋‍♂️

This is crazy 😮🙌

I'm not a coder or designer but I love watching your videos, like this one and the calculator, chat bubbles, etc. I enjoy great user experience. (edit; apple allows it to be toggled even without hovering over the switch as long as its not released)

@samselikoff

Жыл бұрын

I noticed this! Was wondering if it'd be possible to pull off with Aria. Still I love the immediate feedback of the pressed state so I think it's an improvement. Great eye!

Wow thank you!

Dude you are sooooo good bro I hope I can one day be as good as you when I grow up

Look's awesome. I wonder if you could create a follow-up video doing the same with Radix ui to show the difference.

gold

Great video. I love your attention to details. Have you tried combining React Aria with Framer Motion? Do you see this solution viable for more complex animations?

@samselikoff

Жыл бұрын

Definitely viable! I expect I'll make a video on it soon :)

You can just use group-data-[selected]:ml-auto instead of group-data-[selected]:ml-3 group-data-[selected]:group-data-[pressed]:ml-2

@samselikoff

Жыл бұрын

Just gave this a shot - seems like CSS can't transition to ml-auto :(

@sadikulhaque1959

7 ай бұрын

​@@samselikoff😮😮ikiiqi8j

Hey Sam, great video as usual. Does buildui supports purchase parity?

@samselikoff

Жыл бұрын

Yes, shoot an email to support@buildui.com!

thanks as always for the tutorial, but what about the mix-blend-light ecc.. i saw on twitter? :)

@samselikoff

Жыл бұрын

That solution used transforms. It's more performant but the code is more complex, so here I went with good ol' width and margin. Maybe I could make a follow-up showing it off?

@ammargillani509

Жыл бұрын

@@samselikoff Oh for sure please!

@samselikoff

Жыл бұрын

@@ammargillani509 Interested just for curiosity's sake or the performance piece?

@icaro_rdp

Жыл бұрын

@@samselikoff would be very interesting, for both performance and use of uncommon CSS classes.

Could you make a new videos list of awwwards rebuild or recreate tutorial, with gsap or framer motion, this will be awesome dude 😊

This is incredible! Thanks for sharing. Can React Aria cause issues with Radix UI if used in the same component?

@samselikoff

Жыл бұрын

Not sure, but I think you'd want to stick to one UI lib per component 👍

Is it possible to do the same with the Radix UI switch?

Would you give an advantage to React-Aria or Radix-UI for accessibility? Based on the videos, it seems like React-Aria is a bit more robust, but idk if that's just a result of the chosen examples - comparing apples to oranges..?

ah this is great, thank you. Have u ever tried radix-ui for react-aria alternative?

@samselikoff

Жыл бұрын

Yes I actually have a video on a dropdown using Radix! I love it it's a great library. kzread.info/dash/bejne/omx31dGth7jHo5M.html

Are there any libraries for react ios components at the same detail that you go into ?

How can I set the switch to turn on when the page refreshes for first time, Great video BTW :)

@samselikoff

Жыл бұрын

If you check out the Usage section from the demo here, you should just be able to default the React state to true: buildui.com/recipes/ios-animated-switch

Wait at 9:43 how do you increase the ml-[number] is it just cut on the edit ?

@samselikoff

Жыл бұрын

Nope that's `r` (replace) with vim!

Too bad data-pressed doesn't have a way to set a distance point, so that it will only release if, for example, you're 20px outside the switch. That would make it behave even more like Apple's design.

@samselikoff

Жыл бұрын

Agreed, this would be awesome!

As far as I know, div element is not allowed to be inside label :(

@samselikoff

Жыл бұрын

Great catch! Updated the recipe to use a span with display block: buildui.com/recipes/ios-animated-switch

This is great but man I hate how busy tailwind makes a simple React tree look

@brunopanizzi

Жыл бұрын

Check out the inline-fold extension, It wraps the class attribute to make it look better

@samselikoff

Жыл бұрын

I meant to press ⌥+Z to unwrap the lines at the end, I usually do that when I'm done styling and working on behavior. It definitely cuts down on the noise. I don't know if you've used Tailwind a lot but personally the nearness of all the classes is such a huge benefit when you want to add or change something that the visual noise just doesn't bother me anymore.

Jesus man what's wrong with plain css, tailwind looks so bad