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)
Смотрите видео How to Build (Good) Admin Dashboards || React & TailwindCSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tom Is Loading 09 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 10,140 раз и оно понравилось 509 людям.