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)