Building an iOS Animated Toggle with React Aria Components and Tailwind CSS

[@MeonisRP]

Man, you care about these details so much! ❤

[@Isticsek]

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!

[@TouseefKhan-iy9px]

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

[@florianfiedler4145]

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!

[@reydman08]

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

[@rjtdas]

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

[@mryechkin]

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.

[@jeffsegovia00]

Mindblown here. Thanks Sam! 🎉

[@golansoffer6538]

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

[@wfl-junior]

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

[@Omar45]

Amazing! Thanks for your high-quality content

[@phm703]

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

[@meeexy116]

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

[@Shroomade]

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!

[@voinbobar]

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

[@DEV_XO]

Amazing Sam!

[@laptopuser5198]

Very good walk thru. Thanks

[@stottelaars]

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

[@IkraamDev]

Brilliant video!

[@SaadKhanAhmed]

Your videos are awesome!

[@SogMosee]

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

[@bobdpa]

Another awesome video. Thanks! 🙋‍♂️

[@HarshDoes]

This is crazy 😮🙌

[@Benjamin-Chavez]

Wow thank you!

[@RybaDwudyszna]

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 :)

[@ReactNativeWeeks]

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

[@johnstrickler8412]

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..?

[@icaro_rdp]

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.

[@abe10]

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

[@samselikoff]

Yes, shoot an email to [e-mail]!

[@futuremoe]

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 👍

[@faruksardar8829]

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

[@omkarkulkarni3644]

gold

[@edhahaz]

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

[@Piotrski]

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]

​@@samselikoff😮😮ikiiqi8j

[@DioArsya]

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. kzbin.info/www/bejne/pmmmpKKqjLqUqZI

[@wfl-junior]

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

[@mustafawael8617]

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

[@anthonylaflamme]

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!

[@kevinbatdorf]

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!

[@mounis]

[@Tysian]

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

[@nonstopper]

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.

[@edhahaz]

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