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...
Main inspo: https://dribbble.com/shots/24455638-F...
CMDK library: https://github.com/pacocoursey/cmdk
React Icons: https://react-icons.github.io/react-i...
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: https://github.com/TomIsLoading
Twitter: / 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)
Watch video How to Build (Good) Admin Dashboards || React & TailwindCSS online without registration, duration hours minute second in high quality. This video was added by user Tom Is Loading 09 September 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 10,140 once and liked it 509 people.