How to Build (Good) Admin Dashboards || React & TailwindCSS

Framer Motion course waitlist ✨ https://www.blast.dev Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev Building admin dashboards can be tough to get right for us developers. There's SO MANY little things that need to go right to make it look and feel professional. So today we're going to build one! We'll build it using React with NextJS and TailwindCSS, and we'll cover a whole bunch of tips on what you should look out for to make sure that any dashboards you build going forward come out looking awesome. (p.s. apologies for the weird focus at the beginning of the video, I have no idea what I'm doing with a camera yet so bare with me 😂) 📚 Project Links Source code: https://github.com/TomIsLoading/react-tailwind-dashboard Main inspo: https://dribbble.com/shots/24455638-Financial-Dashboard CMDK library: https://github.com/pacocoursey/cmdk React Icons: https://react-icons.github.io/react-icons/ 🔗 My Links TikTok: https://www.tiktok.com/@tomisloading Instagram: https://www.instagram.com/tomisloading/ GitHub: https://github.com/TomIsLoading Twitter: https://twitter.com/TomIsLoading Discord & more: https://linktr.ee/tomisloading Portfolio templates: https://tomisloading.gumroad.com/ Timeline: 0:00 - Introduction 0:27 - Don't reinvent the wheel (inspiration resources) 2:45 - Sizing panels 7:02 - Sizing text & contrast (account toggle) 16:11 - Consider your users (cmdk search bar) 28:08 - Slowly add contrast (nav options) 33:05 - Account for page growth (plan picker section) 37:08 - Align everything (top bar) 41:46 - Use different types of contrast selectively (stat cards) 50:04 - Don't reinvent the wheel 2 (adding charts) 59:14 - Use color purposefully (recent transactions table)