Accessible Slide Over in React with Tailwind UI and React-Aria

In this video I show you everything you need to build the "Slide Over" from Tailwind UI as a fully accessible React component, using Tailwind CSS, React-Aria and Framer Motion.

UPDATE:
Tailwind UI now supports React out of the box. Check out my updated video here:    • Tailwind UI Slide-Over with Headless UI (R...  

Code: github.com/mryechkin/tailwind-slideover

Tailwind UI (Slide Over): tailwindui.com/components/application-ui/overlays/…

React-Aria: react-spectrum.adobe.com/react-aria/index.html

Framer Motion: www.framer.com/api/motion

Timestamps:

00:00 - Intro
00:46 - Tailwind CSS & Tailwind UI overview
03:03 - Adding Slide-Over to React application
14:50 - Accessibility concerns
19:10 - Using accessibility hooks from React Aria
41:52 - Adding animations with Framer Motion
51:40 - Recap and outro

Thanks for watching!

GitHub: github.com/mryechkin
Twitter: twitter.com/mryechkin